对齐2周的div水平第三div容器

Question

里面我有以下代码：

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

我希望能有＃盒1和＃BOX2一个容器内旁边其他。集装箱集中

Answer 1

这将中心集装箱，并有两个div内它为中心，而从实际的内容分离的样式：

HTML：

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

CSS：

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

CSS：

.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

试试这个：

HTML：

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

CSS：

.inlined 
{ 
    display: inline-block; 
} 

你也使用.inlined { float: left; }或.inlined { float: right; }，但这些可以根据周围的意外行为元素。

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>