我想有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]

任何建议吗?


当前回答

使用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>

其他回答

你已经正确地做了,你只需要清除你的浮动。 简单的添加

overflow: auto; 

到容器类。

使用Flexbox水平对齐三个div

下面是一个CSS3方法,用于在另一个div中水平对齐div。

#container { display: flex; /* establish flex container */ flex-direction: row; /* default value; can be omitted */ flex-wrap: nowrap; /* default value; can be omitted */ justify-content: space-between; /* switched from default (flex-start, see below) */ background-color: lightyellow; } #container > div { width: 100px; height: 100px; border: 2px dashed red; } <div id="container"> <div></div> <div></div> <div></div> </div>

js小提琴

justify-content属性有五个值:

flex-start(默认) flex-end 中心 之间的空间 空间

在所有情况下,三个div都在同一行上。有关每个值的描述,请参见:https://stackoverflow.com/a/33856609/3597276


flexbox的好处:

最少的代码;非常有效的 对中,无论是垂直还是水平,都是简单易行的 等高列简单易行 调整伸缩元素的多个选项 这是响应 与浮动和桌子不同,它们提供的布局容量有限,因为它们从未用于建筑布局, flexbox是一种现代(CSS3)技术,具有广泛的选项。


欲了解更多关于flexbox的信息,请访问:

调整伸缩项目的方法 使用CSS灵活的盒子~ MDN Flexbox ~ CSS-Tricks的完整指南 什么Flexbox?!~ YouTube视频教程


浏览器支持:除IE < 10外,所有主流浏览器都支持Flexbox。一些最新版本的浏览器,如Safari 8和IE10,需要使用厂商前缀。要快速添加前缀,请使用Autoprefixer。更多细节在这个答案中。

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结构,你也可以添加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/

使用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>