Question

我有一个关于放置两个＆lt; div＆gt;的问题容器并排。

以后代码应如下所示：

<div class="wrapper">
<div class="leftColumn">navigation</div>
<div class="rightColumn">content</div>
</div>

http://jsfiddle.net/9NFDS/

问题：

两个提供的示例中哪一个更符合W3C？哪种方式更适合在两个容器之间创建距离？

Answer 1

如果您针对IE的较低版本（如IE7甚至更低版本）定位浏览器支持，则需要使用第二种方法（填充）。

你的第一个方法会出现问题，因为你的一个容器是浮动的，一个是正确的，因此父div（wrapperExampleOne）的高度将会崩溃并导致0px（应该等于高度它的孩子们。）

适用于大多数浏览器的更好方法是使用保证金。在此处修改的小提琴的第三个示例中提到了一个示例http://jsfiddle.net/9NFDS/4/

HTML：

<div class="wrapperExampleThree">
    <div class="leftColumn">
    </div>
    <div class="rightColumn">
        test
    </div>
</div>

CSS：

.wrapperExampleThree
{
    margin: 0 auto;
    width: 900px;
}
.wrapperExampleThree .leftColumn
{
    width: 200px;
    height: 50px;
    background: pink;
    float: left;
}
.wrapperExampleThree .rightColumn
{
    width: 650px;
    margin-left:50px;
    height: 50px;
    background: green;
    float: left;
}

Answer 2

我认为第一个。

<div class="wrapperExampleOne">
<div class="leftColumn">
</div>
<div class="rightColumn">
</div>
</div>

在今天的时代，制造距离很常见。就像facebook，youtube，google。

两个<div>容器并排</div>

2 个答案: