我想有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]
任何建议吗?
当前回答
使用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;
}
科普彭
其他回答
可能的答案，如果你想保持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%);
}
码笔链接
使用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;
}
科普彭
我喜欢我的杠铃紧而有活力。这是css3和HTML 5
First, setting the Width to 100px is limiting. Don't do it. Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0; instead for that scenario. You are using id's (hash #container, #left, etc) instead of classes (.container, .left, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead. For HTML, no need to swap order for: left, center, & right. display: inline-block; fixes this, returning your code to something cleaner and logically in order again. Lastly, you need to clear the floats all up so that it doesn't mess with future <div>. You do this with the clear: both;
总结:
HTML:
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
CSS:
.container {right: 0; text-align: center;}
.container .left, .container .center, .container .right { display: inline-block; }
.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }
如果使用HAML和SASS，则有加分项;)
HAML:
.container
.left
.center
.right
.clear
萨斯:
.container {
right: 0;
text-align: center;
.left, .center, .right { display: inline-block; }
.left { float: left; }
.center { margin: 0 auto; }
.right { float: right; }
.clear { clear: both; }
}
#warpcontainer {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
CSS网格可以轻松完成工作:
#{容器 显示:网格;/*(1)一个网格容器*/ grid-auto-flow:列;/*(2)列布局*/ justify-content:之间的空间;/*(3)对齐列*/ 背景颜色:浅黄色; ｝ #容器> div { 宽度:100 px; 身高:100 px; 边框:2px红色虚线; ｝ < div id = "容器" > < div > < / div > < div > < / div > < div > < / div > < / div >
