我有以下代码:
<div id="container">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
我希望能够让#box1 和#box2 在容器内彼此相邻。容器居中
这将使容器居中,并使其中的两个 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%;
}
工作示例:
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;
}
试试这个:
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; }
or .inlined { float: right; }
,但根据周围的元素,它们可能会出现意外行为。
我希望这就是你正在寻找的...
<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>