2

这是我的代码的摘录：

<div id="column2">
  <div id="textbox">
    <h3>About</h3>
    <div id="text">
      <img id="portrait" src="images/portrait.png"/>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin tristique posuere. Phasellus quis rhoncus felis. </p>
      <p>Curabitur condimentum gravida lorem, non accumsan justo facilisis non. Nam at nisi venenatis tortor viverra posuere.</p>
    </div>
  </div>
</div>

该摘录的CSS代码：

#textbox {
    background:lightgrey;
    margin:38px 0 0 0;
    width:400px;
    font-size:0.825em;
    line-height:150%;
}

#textbox p {
    margin-top:0;
}

#textbox h3 {
    margin: 0 0 15px 0;
}

#column2 {
    float:right;
    margin-right:150px;
}

#portrait {
    float:right;
    margin:0 0 10px 10px;
}

问题是当我在“文本框” div 中没有图像时，中心与带有图像的中心不同。我正在使用边距：0 自动；将此处未包含的整个包装器 div 居中。我可能能够通过绝对定位将其正确居中（尚未测试），但为什么图像会影响中心？由于图像的原因，整个包装器 div 向右移动了大约 5-10px（我对其进行了测试）。有什么建议么？非常感谢。

小提琴：http: //jsfiddle.net/uVSTJ/1/

编辑：如果我没有使用任何中心定位，则不会出现问题。

编辑2：我发现了问题，但不知道如何解决。只有当我到达页面底部并出现滚动条时才会发生这种情况。我想它会从不同的地方开始计算边距或其他东西，这会导致右边有几个像素。有什么方法可以在不使用溢出属性的情况下解决这个问题？

4

2 回答 2

0

5 to 10px reminds me of a scrollbar. Maybe the image causes the heigth of the web page to exceed the height of the window in which case a scrollbar will be added. This causes the content to move a little bit.

于 2012-07-14T15:25:58.433 回答
0

样式有什么用#text？小提琴真的很有帮助，因为前面可能有一些divs样式可能会影响布局。

于 2012-07-14T15:35:56.380 回答