我想有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]
任何建议吗?
当前回答
CSS网格可以轻松完成工作:
#{容器 显示:网格;/*(1)一个网格容器*/ grid-auto-flow:列;/*(2)列布局*/ justify-content:之间的空间;/*(3)对齐列*/ 背景颜色:浅黄色; ｝ #容器> div { 宽度:100 px; 身高:100 px; 边框:2px红色虚线; ｝ < div id = "容器" > < div > < / div > < div > < / div > < div > < / 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现场看到它
你已经正确地做了，你只需要清除你的浮动。 简单的添加
overflow: auto;
到容器类。
有一些技巧可以用于对齐元素。
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 >
.processList
text-align: center
li
.leftProcess
float: left
.centerProcess
float: none
display: inline-block
.rightProcess
float: right
html
ul.processList.clearfix
li.leftProcess
li.centerProcess
li.rightProcess
使用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>，它将垂直扩展#容器以包含两侧浮动，而不是仅从#中心取高度，并可能允许两侧突出底部。
