如何在另一个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楼

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

确保图像包含在div中（本例中为#center ）。如果不是，则必须将display设置为block ，并且它似乎相对于浮动元素之间的空间居中。

确保设置图像及其容器二者的大小：

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

#3楼

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

首先，将“宽度”设置为100px是有限制的。不要这样
其次，将容器的宽度设置为100％可以正常工作，直到谈论它是整个应用程序的页眉/页脚栏，例如导航栏或信用/版权栏。使用right: 0; 而不是那种情况。
您正在使用id（哈希#container #left ， #container #left等）而不是类（ .container ， .left等），这很好，除非您想在代码中的其他地方重复样式样式。我会考虑使用类代替。
对于HTML，无需将顺序交换为：左，中和右。 display: inline-block; 解决此问题，将您的代码返回到更整洁且逻辑上又有序的位置。
最后，您需要清除所有浮动内容，以免与将来的<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取其高度，并可能允许两侧伸出底部。

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3166175

标签

haml

Sass