Question

我有这个经典问题似乎无法为我解决。我只想让两个div水平而不是垂直地相互浮动。我已经阅读了这个常见问题的几种解决方案，但它们似乎并不适用于我。

#wrapper
{
margin-top: 260px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
width: 700px;
height: 400px;
padding:0;
}

#content
{
background-color: blue;
width: 500px;
border: 1px solid #9abdf8;
margin-right: 200px;
margin:0;
float:left;
}

#right
{
float:right;
margin-left: 500px;
width: 200px;
background-color: red;
}


<div id="wrapper">


    <div id="navigation">
    navbar here     
    </div>

    <div id="content">
        wda wda  
    </div>

    <div id="right">
            right right right right right 
        </div>


</div>

结果如下：http://www.roonookie.com/r.jpg

如果我尝试这个解决方案（How to Place two divs to the next one），我会得到与我的照片相同的结果。但是，如果我删除包装类，那么该解决方案可行。但我想保留包装类......

我也尝试过显示：内联，但也不起作用。

我做错了什么？：（

Answer 1

#content两边的边框为1px，因此它需要498px的宽度，因此它的总宽度为500px。边框宽度是您为元素指定的宽度的补充，而不是包含在其中 - 查看框模型。

Answer 2

除了46Bit评论。如果要在#content div之后使用填充规则。你的计算必须是正确的：

如果padding-right：4px;
width = 498 - 4
如果填充：4px
width = 498-8

div旁边的Div。应该工作，但不是

2 个答案: