如何在另外一个div内对齐3个div（左/中/右）？

我想在容器div中对齐3个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]

有小费吗？

---

#1楼

若是您不想更改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/

---

#2楼

这是当我以图像为中心元素时必须对接受的答案进行的更改：

1. 确保图像包含在div中（本例中为#center ）。 若是不是，则必须将display设置为block ，而且它彷佛相对于浮动元素之间的空间居中。

2. 确保设置图像及其容器两者的大小：

   #center { margin: 0 auto; } #center, #center > img { width: 100px; height: auto; }

---

#3楼

我喜欢个人杠铃紧凑而充满活力。 这是针对CSS 3和HTML 5的

1. 首先，将“宽度”设置为100px是有限制的。 不要这样

2. 其次，将容器的宽度设置为100％能够正常工做，直到谈论它是整个应用程序的页眉/页脚栏，例如导航栏或信用/版权栏。 使用right: 0; 而不是那种状况。

3. 您正在使用id（哈希#container #left ， #container #left等）而不是类（ .container ， .left等），这很好，除非您想在代码中的其余地方重复样式样式。 我会考虑使用类代替。

4. 对于HTML，无需将顺序交换为：左，中和右。 display: inline-block; 解决此问题，将您的代码返回到更整洁且逻辑上又有序的位置。

5. 最后，您须要清除全部浮动内容，以避免与未来的<div> 。 您能够clear: both;作到这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

SASS：

.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; }
}

---

#4楼

您已正确完成操做，只须要清除浮动便可。 只需添加

overflow: auto;

到您的容器类。

---

#5楼

使用该CSS，将您的div放置为这样（浮点数优先）：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS您也能够向右浮动，而后向左浮动，而后居中。 重要的是浮子位于“主”中心部分以前。

PPS您一般但愿在#container内部最后一个代码段： <div style="clear:both;"></div> ，它将垂直扩展#container以包含两个侧面浮标，而不是仅从#center取其高度，并可能容许两侧伸出底部。