2

我想要一种方法来放置一张图片，它在任何浏览器、任何屏幕尺寸上都将显示相同。我需要将图片定位在灰色桌子的顶部，但稍微向左偏移。如果我将图片从左侧偏移一定数量的像素，它会在一个浏览器中正确显示，而不是在另一个浏览器中。请参阅下面的代码。谢谢！

<style type="text/css">
<!-- table, td, th {
    padding: 5px;
}
div.table-foreground {
    position:relative;
}
div.table-foreground img {
    position:absolute;
    top:50%;
}
.table1 {
    background-color:white;
    background-repeat:no-repeat;
    color:black;
    text-align: center;
    margin: auto;
    font-family:sans-serif;
    table-layout:fixed;
    width: 960px;
}
.table2 {
    background-color:#daf3fb;
    color:black;
    text-align: left;
    margin:auto;
    font-family:sans-serif;
    table-layout:fixed;
    width: 475px;
}
.table3 {
    background-color:#e8ebed;
    color:black;
    text-align: left;
    margin:auto;
    font-family:Helvetica, sans-serif;
    border: solid 2px white;
    outline: solid 1px gray;
    table-layout:fixed;
    width: 375px;
    height:300px;
}
-->
</style>
<body>
<div class="table-foreground">
    <!--img set to relative.-->
    <img id="img1"
src="http://msadesign.net/sitebuilder/images/Gold_Horizontal_Rectangle3-600x185.jpg"
    style="left:520px;top:100px;" />
</div>
<table class="table1">
    <tr>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
    <tr>
        <td>
            <table class="table2">
                <tr>
                    <td>Text 4</td>
                </tr>
                <tr>
                    <td>Text 5</td>
                </tr>
                <tr>
                    <td>Text 6</td>
                </tr>
                <tr>
                    <td>Text 7</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="table3">
                <tr>
                    <td>Text 8</td>
                </tr>
                <tr>
                    <td>Text 9</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
4

1 回答 1

1

如果您需要将 img 相对于灰色表格（table3）进行绝对定位，则需要将 img 和表格放在相对定位的 div 中：

演示：http: //jsfiddle.net/qeB2t/

<table class="table1">
    <tr>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
    <tr>
        <td>
            <table class="table2">
                <tr>
                    <td>Text 4</td>
                </tr>
                <tr>
                    <td>Text 5</td>
                </tr>
                <tr>
                    <td>Text 6</td>
                </tr>
                <tr>
                    <td>Text 7</td>
                </tr>
            </table>
        </td>
        <td>
            <div class="table-foreground">
            <img id="img1"
src="http://msadesign.net/sitebuilder/images/Gold_Horizontal_Rectangle3-600x185.jpg"
             />
            <table class="table3">
                <tr>
                    <td>Text 8</td>
                </tr>
                <tr>
                    <td>Text 9</td>
                </tr>
            </table>
            </div>
        </td>
    </tr>
</table>

CSS

div.table-foreground img {
    position:absolute;
    top:50px;
    left: 30px;
}
于 2013-01-21T17:26:10.857 回答