संरेखित 2 divs क्षैतिज एक तिहाई कंटेनर div

Question

अंदर मैं निम्नलिखित कोड है:

<div id="container"> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
</div> 

मैं # box1 और # box2 एक कंटेनर के अंदर दूसरे के बगल में करने में सक्षम होना चाहता हूँ।

एचटीएमएल:

<div id="container"> 
    <div id="box1" class="inlined"> 
     <div id="box3"></div> 
     <div id="box4"></div> 
    </div> 
    <div id="box2" class="inlined"></div> 
</div> 

सीएसएस:

.inlined 
{ 
    display: inline-block; 
} 

तुम भी .inlined { float: left; } या .inlined { float: right; } इस्तेमाल कर सकते हैं, लेकिन उन आसपास के आधार पर अनपेक्षित व्यवहार हो सकता है कंटेनर कोशिश इस

Answer 1

इस कंटेनर केंद्र, और दो divs होगा भीतर केंद्रित है, जबकि वास्तविक सामग्री से शैलियों को अलग:

HTML:

<div id="container"> 
    <div>Div 1</div> 
    <div>Div 2</div> 
</div> 

सीएसएस:

#container > div 
{ 
    display: inline-block; 
    border: solid 1px #000; 
} 
#container 
{ 
    border: solid 1px #ff0000; 
    text-align: center; 
    margin: 0px auto; 
    width: 40%; 
} 

कार्य उदाहरण:

http://jsfiddle.net/JLjjK/

2017 अद्यतन:

flexbox और अधिक आम होता जा रहा है। यहाँ flexbox साथ इसी तरह के परिणाम प्राप्त करने के लिए एक तरीका है:

HTML:

<div class="outer"> 
    <div>1</div> 
    <div>2</div> 
</div> 

सीएसएस:

.outer { 
    border: 1px solid #000; 
    display:flex; 
    justify-content: center; 
    padding: 3px; 
} 
.outer > div { 
    border: 1px solid #000; 
    margin:2px; 
} 

उदाहरण: https://jsfiddle.net/pb61a1cj/1/

Answer 2

केंद्रित है तत्वों।

Answer 3

मुझे आशा है कि यह आपके लिए क्या देख रहे है .. ।

<style type="text/css"> 
.container{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; 
} 
.box1, .box2 { 
    width:280px; 
    height:auto; 
    float:left; 
    margin-bottom:10px; 
    padding:10px; 
    border:1px solid #888; 
} 
.box1 { 
    clear:left; 
    margin-right:10px; 
} 
.clear { 
    clear:both; 
} 
</style> 



<div id="container"> 
    <div class="box1"> 
     Enter box 1 content here. 
    </div> 
    <div class="box2"> 
     Enter box 2 content here. 
    </div> 
    <div class="clear"></div> 
</div>