如何並排顯示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>