我想有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:
<div id="container" class="blog-pager">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS:
#container{width:98%; }
#left{float:left;}
#center{text-align:center;}
#right{float:right;}
text-align:中心;给予完美的中心对齐。
JSFiddle演示
最简单的解决方案是用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;
}
我做了另一次尝试来简化它，并在不需要容器的情况下实现它。
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现场看到它
有一些技巧可以用于对齐元素。
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 >
使用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;
}
科普彭
