Question

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

<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>

Answer 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;
}

如何将图像放在桌子顶部，距桌子左边缘-10px？

1 个答案: