Làm cách nào để hiển thị 2 phần cạnh nhau?

Question

Tôi đã sau 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> 

Và tôi muốn hiển thị Phần 1 ở bên trái và Phần 2 bên phải thay vì theo chiều dọc như họ thường xuất hiện. Phần phụ huynh xung quanh họ được thụt vào theo số 120px và tôi muốn giữ nguyên điều đó.

Làm cách nào để thực hiện việc này? Tôi đã thử float: left trên Phần 1 và display: inline trên phần chính, nhưng những thứ đó dường như gây ra Mục 2 để "thoát" khỏi phần cha mẹ của nó.

Answer 1

nổi cả hai trái có chiều rộng thiết lập trên từng bộ phận và bạn sẽ có OK, như vậy:

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

Không cần phải thay đổi đánh dấu của bạn theo cách này.

Cũng vào đây để biết thêm thông tin về các mô hình hộp CSS: http://css-tricks.com/the-css-box-model/

Answer 2

Có section1 và section2 trong div riêng biệt và thử float: left trên section1 div và float: right trên 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

Bạn phải thêm overflow:hidden; cho phụ huynh.

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>