我想有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%);
}
码笔链接
其他回答
如果你不想改变你的HTML结构，你也可以添加text-align: center;到包装器元素和一个display: inline-block;到居中的元素。
#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:100px;
}
#center {
display: inline-block;
margin:0 auto;
width:100px;
}
#right {
float:right;
width:100px;
}
现场演示:http://jsfiddle.net/CH9K8/
最简单的解决方案是用3列组成一个表，并将该表居中。
html:
<div id="cont">
<table class="aa">
<tr>
<td>
<div id="left">
<h3 class="hh">Content1</h3>
</div>
</td>
<td>
<div id="center">
<h3 class="hh">Content2</h3>
</div>
</td>
<td>
<div id="right"><h3 class="hh">Content3</h3>
</div>
</td>
</tr>
</table>
</div>
css:
#cont
{
margin: 0px auto;
padding: 10px 10px;
}
#left
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
#center
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
#right
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
使用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>
我做了另一次尝试来简化它，并在不需要容器的情况下实现它。
HTML
<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>
CSS
.box1 {
background-color: #ff0000;
width: 200px;
float: left;
}
.box2 {
background-color: #00ff00;
width: 200px;
float: right;
}
.box3 {
background-color: #0fffff;
width: 200px;
margin: 0 auto;
}
你可以在JSFiddle现场看到它
Float属性实际上并不用于对齐文本。
此属性用于将元素添加到右侧、左侧或中心。
Div > Div{边框:1px纯黑色;} < html > < div > < div风格= "浮动:左”>第一个< / div > < div风格= "浮动:左”>第二< / div > < div风格= "浮动:左”>第三< / div > < div风格= "浮动:对" >第一个< / div > < div风格= "浮动:对" >第二< / div > < div风格= "浮动:对" > 3 < / div > < / div > < / html >
左输出为[First][second][Third]
右输出为[Third][Second][First]
这意味着float => left属性将把你的下一个元素添加到上一个元素的左边，right也是如此
此外，你还必须考虑父元素的宽度，如果子元素的宽度之和超过了父元素的宽度，那么下一个元素将在下一行添加
< > html < div style =教室:100% > < div style =花车:左派;教室:50%第一> < / div > < div style =花车:左派;教室:50% >第二个< / div > < div style = "漂浮:左派;第三教室:50% > < / div > < / div > < / html >
(第一次)(第二次)
(三)
所以你需要考虑所有这些方面来得到完美的结果
