我想有3个div对齐在一个容器div，就像这样:
[[LEFT] [CENTER] [RIGHT]]
容器div是100%宽(没有设定宽度)，中心div在调整容器大小后应该保持在中心。
所以我设置:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
但它变成了:
[[LEFT] [CENTER] ]
[RIGHT]
任何建议吗?
当前回答
可能的答案，如果你想保持HTML的顺序而不使用flex。
HTML
<div class="a">
<div class="c">
the
</div>
<div class="c e">
jai ho
</div>
<div class="c d">
watsup
</div>
</div>
CSS
.a {
width: 500px;
margin: 0 auto;
border: 1px solid red;
position: relative;
display: table;
}
.c {
display: table-cell;
width:33%;
}
.d {
text-align: right;
}
.e {
position: absolute;
left: 50%;
display: inline;
width: auto;
transform: translateX(-50%);
}
码笔链接
其他回答
如果左边、中间和右边的div有不同的宽度，你可以这样完成:
#container {
position: relative;
width: 100%;
text-align: center;
}
#left {
position: absolute;
left: 0px;
}
#right {
position: absolute;
right: 0px;
}
#center {
display: inline-block;
}
如果你的中心DIV是文本，你不需要#center CSS。
可能的答案，如果你想保持HTML的顺序而不使用flex。
HTML
<div class="a">
<div class="c">
the
</div>
<div class="c e">
jai ho
</div>
<div class="c d">
watsup
</div>
</div>
CSS
.a {
width: 500px;
margin: 0 auto;
border: 1px solid red;
position: relative;
display: table;
}
.c {
display: table-cell;
width:33%;
}
.d {
text-align: right;
}
.e {
position: absolute;
left: 50%;
display: inline;
width: auto;
transform: translateX(-50%);
}
码笔链接
使用CSS3 Flexbox可以很容易地做到这一点，这个功能将在未来被几乎所有浏览器使用(当<IE9完全死亡时)。
查看浏览器兼容性表
HTML
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
CSS
.container {
display: flex;
flex-flow: row nowrap; /* Align on the same line */
justify-content: space-between; /* Equal margin between the child elements */
}
Output: .container { display: flex; flex-flow: row nowrap; /* Align on the same line */ justify-content: space-between; /* Equal margin between the child elements */ } /* For Presentation, not needed */ .container > div { background: #5F85DB; padding: 5px; color: #fff; font-weight: bold; font-family: Tahoma; } <div class="container"> <div class="left"> Left </div> <div class="center"> Center </div> <div class="right"> Right </div> </div>
使用CSS，像这样放置你的div(浮动优先):
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
附注:你也可以向右浮动，然后向左浮动，然后向中心浮动。重要的是，浮动出现在“主”中心部分之前。
P.P.S.你经常想要最后在#容器里的这个片段:<div style="clear:both;></div>，它将垂直扩展#容器以包含两侧浮动，而不是仅从#中心取高度，并可能允许两侧突出底部。
使用Bootstrap 3我创建了3个等宽的div(在12列布局中，每个div 4列)。 这样，即使左/右部分的宽度不同(如果它们没有溢出列的空间)，您也可以保持中心区域居中。
HTML:
<div id="container">
<div id="left" class="col col-xs-4 text-left">Left</div>
<div id="center" class="col col-xs-4 text-center">Center</div>
<div id="right" class="col col-xs-4 text-right">Right</div>
</div>
CSS:
#container {
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
height: 100px;
}
.col {
border: 1px solid #07f;
padding: 0;
}
CodePen
为了创建没有库的结构，我从Bootstrap CSS复制了一些规则。
HTML:
<div id="container">
<div id="left" class="col">Left</div>
<div id="center" class="col">Center</div>
<div id="right" class="col">Right</div>
</div>
CSS:
* {
box-sizing: border-box;
}
#container {
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
height: 100px;
}
.col {
float: left;
width: 33.33333333%;
border: 1px solid #07f;
padding: 0;
}
#left {
text-align: left;
}
#center {
text-align: center;
}
#right {
text-align: right;
}
科普彭
