如何并排显示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，我想保留它。

我如何做到这一点？我在父节上的第1节和float: left上尝试了display: inline，但这些似乎导致< strong>第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

将第1部分和第2部分放在不同的div中，并在第1部分div上尝试float: left，在第2部分div上尝试float: right。

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>