如何并排显示 2 个部分？ [复制]答案

【问题标题】：How do I display 2 sections side-by-side? [duplicate]如何并排显示 2 个部分？ [复制]
【发布时间】：2011-04-16 05:53:53
【问题描述】：

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

我想在左侧显示Section 1，在右侧显示Section 2，而不是像通常那样垂直显示。围绕它们的父部分缩进120px，我想保留它。

我该如何做到这一点？我在 Section 1 上尝试了 float: left 并在父部分上尝试了 display: inline，但这些似乎导致 Section 2 以“突破”其父部分。

【问题讨论】：

标签： css html css-float

【解决方案1】：

将 section1 和 section2 放在不同的 div 中，并在 section1 div 上尝试 float: left 和在 section2 div 上尝试 float: right。

【讨论】：

【解决方案2】：

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

【讨论】：

两个部分都应该向左浮动，以便它们从左侧“堆叠”.. afaik

【解决方案3】：

将它们都向左浮动，每个部分都设置宽度，你会没事的，就像这样：

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

【讨论】：

【解决方案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>

【讨论】：