Question

我正在使用宽度固定的容器。在容器内部，我有两个div向左浮动，第一个div的宽度为9％，第二个div的宽度为91％但是由于某种原因，在右边显示了1px的白线。我该如何解决这个问题？在放大浏览器时，它有时会有所不同。

HTML：

<div id="main-container">

       <div id="container1">
       </div> 
       <div id="container2">
       </div>     

</div>

CSS：

#main-container {
    margin: 0 auto;
    margin-top: 45px;
    width: 1110px;
    height: 650px;
    border: 3px solid red;
    padding: 0px;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px; }

/*content*/

#container1 {
    float: left;
    width: 9%;
    height: 100%;
    border-radius: 7px 0px 0px 7px;
    -moz-border-radius: 7px 0px 0px 7px;
    -webkit-border-radius: 7px 0px 0px 7px;
    background: yellow; }

#container2 {
    float: left;
    width: 91%;
    height: 100%;
    border-radius: 0 7px 7px 0;
    -moz-border-radius: 0 7px 7px 0;
    -webkit-border-radius: 0 7px 7px 0;
    background: orange; }

demo

Answer 1

正如其他一些人所提到的那样，问题似乎是由WebKit中的差异四舍五入引起的。

您可以将float: right;添加到第二个容器中以修复对齐并消除间隙。 http://jsfiddle.net/Gw5AH/3/

使用div的百分比

1 个答案: