如何并排显示2个部分？

Question

我有以下的HTML代码：

<section class="indent-1"> 
    <!-- Section 1 --> 
    <section> 
     <div>Some content</div> 
     <div>Some more</div> 
    </section> 

    <!-- Section 2 --> 
    <section> 
     <div>Some content</div> 
     <div>Some more</div> 
    </section> 
</section> 

而且我想显示第1在左边，在右边，而不是垂直像他们通常出现第2。围绕它们的父节是缩进120px，我想保留这一点。

我该如何做到这一点？我试图float: left上第1和display: inline父部分，但这些似乎导致第2其父节的“爆发”。

Answer 1

浮法他们两人留下的每个部分一组宽度，你会没事的，就像这样：

<style> 
    .indent-1 {float: left;} 
    .indent-1 section {width: 50%; float: left;} 
</style> 

<section class="indent-1"> 
    <!-- Section 1 --> 
    <section> 
     <div>Some content 1</div> 
     <div>Some more 1</div> 
    </section> 

    <!-- Section 2 --> 
    <section> 
     <div>Some content 2</div> 
     <div>Some more 2</div> 
    </section> 
</section> 

无需改变您的标记这种方式。

而且这里的CSS盒模型进一步信息：http://css-tricks.com/the-css-box-model/

Answer 2

让section1和section2在单独的div中，并在section1 div上尝试float: left，在section2 div上尝试float: right。

Answer 3

<style> 
    section.left{float:left;} 
</style> 
<section class="indent-1"> 
    <!-- Section 1 --> 
    <section class="left"> 
     <div>Some content</div> 
     <div>Some more</div> 
    </section> 

    <!-- Section 2 --> 
    <section> 
     <div>Some content</div> 
     <div>Some more</div> 
    </section> 
</section> 

Answer 4

您必须添加overflow:hidden;父。

预览：

CSS：

<style> 
    section { border:1px solid red; padding:10px; overflow:hidden; } 
    section > section { float:left; } 
    .indent-1 { padding-left:120px; } 
</style> 

HTML：

<section class="indent-1"> 
    <!-- Section 1 --> 
    <section> 
     <div>Some content</div> 
     <div>Some more</div> 
    </section> 

    <!-- Section 2 --> 
    <section> 
     <div>Some content</div> 
     <div>Some more</div> 
    </section> 
</section>