java 在div中显示三列_如何在另一个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;

}

#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; 解决此问题，将您的代码返回到更整洁且逻辑上又有序的位置。

最后，您需要清除所有浮动内容，以免与将来的

。 您可以clear: both;做到这clear: both;

总结一下：

HTML：

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放置为这样(浮点数优先)：

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

PPS您通常希望在#container内部最后一个代码段：