html - 两个<div>容器并排

Closed. This question needs details or clarity。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。
                        
                        5年前关闭。
                                                                                            
                
        
我有一个关于并排放置两个

容器的问题。

稍后代码应如下所示：

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

http://jsfiddle.net/9NFDS/

题：

提供的两个示例中哪个更符合W3C？哪种方法在两个容器之间建立距离更好？

最佳答案

如果您针对较低版本的IE（例如IE7或更低版​​本）将浏览器支持作为目标，则需要使用第二种方法（填充）。

第一种方法会出现问题，因为其中一个容器处于浮动状态，一个容器处于正确状态，因此父div（wrapperExampleOne）的高度将折叠并导致0px（应等于其子代的高度） 。

适用于大多数浏览器的更好方法是使用margin。在您的修改过的提琴的第三个示例中，这里提到了一个示例，这里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;
}

关于html - 两个<div>容器并排，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24000435/