我想有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]
任何建议吗?
有一些技巧可以用于对齐元素。
01. 使用桌子戏法
.container {
显示:表;
}
.left {
背景:绿色;
显示:表格单元;
宽度:33.33大众;
}
.center {
背景:黄金;
显示:表格单元;
宽度:33.33大众;
}
铃声{
背景:灰色;
显示:表格单元;
宽度:33.33大众;
}
< div class = "容器" >
< div class = "左" >
左
< / div >
< div class = "中心" >
中心
< / div >
< div class = "正确" >
正确的
< / div >
< / div >
02. 使用弹性技巧
.container {
显示:flex;
justify-content:中心;
对齐项目:中心;
}
.left {
背景:绿色;
宽度:33.33大众;
}
.center {
背景:黄金;
宽度:33.33大众;
}
铃声{
背景:灰色;
宽度:33.33大众;
}
< div class = "容器" >
< div class = "左" >
左
< / div >
< div class = "中心" >
中心
< / div >
< div class = "正确" >
正确的
< / div >
< / div >
03. 使用浮动把戏
.left {
背景:绿色;
宽度:100 px;
浮:左;
}
.center {
背景:黄金;
宽度:100 px;
浮:左;
}
铃声{
背景:灰色;
宽度:100 px;
浮:左;
}
< div class = "容器" >
< div class = "左" >
左
< / div >
< div class = "中心" >
中心
< / div >
< div class = "正确" >
正确的
< / div >
< / div >
使用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>