如何並排顯示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節 float: left display: inline在父節上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

你必須添加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>

Answer 3

將section1和section2放在單獨的div中並嘗試float: left on section1 div和float: right on section2 div。

Answer 4

<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>