मैं 2 सेक्शन को साइड-बाय-साइड कैसे प्रदर्शित करूं?

Question

मैं एचटीएमएल कोड निम्नलिखित है:

<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 इंडेंट किया गया है, और मैं इसे संरक्षित करना चाहता हूं।

मैं इसे कैसे पूरा करूं? मैंने पर पर अनुभाग 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> 

अपने मार्कअप इस तरह से बदलने के लिए कोई ज़रूरत नहीं।

इसके अलावा यहां सीएसएस बॉक्स मॉडल पर आगे की जानकारी के लिए: http://css-tricks.com/the-css-box-model/

Answer 2

सेक्शन 1 और सेक्शन 2 अलग div में है और सेक्शन 1 div और float: right पर सेक्शन 2 div पर float: left आज़माएं।

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

आप माता-पिता के लिए overflow:hidden; जोड़ने के लिए।

पूर्वावलोकन:

सीएसएस:

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