如何并排显示两个部分?

I have following HTML code:

我有以下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>

And I'd like to display Section 1 on the left and Section 2 on the right instead of vertically like they normally appear. The parent section surrounding them is indented 120px, and I'd like to preserve that.

我想在左边显示第1部分，右边是第2节，而不是像往常一样垂直显示。围绕它们的父部分是缩进的120px，我想保留它。

How do I accomplish this? I tried float: left on Section 1 and display: inline on the parent section, but those seemed to cause Section 2 to "break out" of its parent section.

我该怎么做呢?我尝试了float:在第1部分和显示:在父部分的内联，但是那些似乎导致第2节“跳出”它的父部分。

4 个解决方案

#1

Float them both left with a set width on each section and you'll be OK, like so:

在每个部分上都放上一个固定的宽度，这样你就可以了，就像这样:

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

No need to change your markup this way.

不需要这样更改标记。

Also here for further info on the CSS box model: http://css-tricks.com/the-css-box-model/

这里还有关于CSS框模型的进一步信息:http://css- passs.com/thecss -box model/。

#2

You have to add overflow:hidden; to the parent.

你必须增加溢出:隐藏;的父母。

Preview:

预览:

CSS:

CSS:

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

HTML:

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>

#3

Have section1 and section2 in separate div's and try float: left on section1 div and float: right on section2 div.

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

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