如何并排显示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/