Wie zeige ich zwei Sektionen nebeneinander an?

Question

Ich habe folgenden HTML-Code:

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

Und ich möchte Abschnitt 1 auf der linken Seite angezeigt werden und Abschnitt 2 auf der rechten statt vertikal wie sie normalerweise erscheinen. Der Elternteil, der sie umgibt, ist eingerückt 120px, und ich möchte das bewahren.

Wie bewerkstellige ich das? Ich versuchte float: left auf Abschnitt 1 und display: inline auf dem Elternteil, aber diese schienen Abschnitt 2 "ausbrechen" von seinem Elternteil zu verursachen.

Answer 1

Float sie beide auf jedem Abschnitt mit einem Satz Breite links und Sie werden in Ordnung sein, etwa 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> 

keine Notwendigkeit, Ihr Markup diese Art und Weise zu ändern.

hier auch für weitere Informationen über das CSS-Box-Modell: http://css-tricks.com/the-css-box-model/

Answer 2

Haben Sie section1 und section2 in separaten divs und versuchen Sie float: left auf section1 div und float: right auf section2 Div.

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

Sie haben overflow:hidden; den Mutter hinzuzufügen.

Vorschau:

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>