Как отобразить 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 /

Answer 2

Вы должны добавить overflow:hidden; к родителю.

Preview:

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

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

Answer 4

Раздел 1 и раздел 2 разделены на отдельные элементы div и попробуйте float: left в разделе section div и float: right в разделе section div.