Question

我试图水平放置3个div块，但是3个块将自己定位在一个新行上。同样在调整大小时我希望他们不要移动。

.left1 {
     padding: 9px;
     border: 1px solid #e7e7e7;
     float: left;
     margin-right: 40px;
     text-align: center;
}
.left2 {
     padding: 9px;
     border: 1px solid #e7e7e7;
     float: left;
     margin-right: 40px;
}
.right1 {
    padding: 9px;
    border: 1px solid #e7e7e7;
    float: left;
    margin-right: 40px;
}

其余代码

http://jsfiddle.net/EWuR8/

Answer 1

盒子对于容器来说太宽了。我只使用3个块重新创建，它工作正常。只需减小容器宽度。

http://jsfiddle.net/zy4cN/

.block1,.block2,.block3{
    float:left;
    padding: 9px;
    border: 1px solid #e7e7e7;
    float: left;
    margin-right: 40px;
}
.nomarg{margin-right:0!important;}

Answer 2

提供一些百分比宽度。这里有一个问题，你需要在宽度上计算其他东西。例如，如果你有填充，边框或边距，那么也必须考虑它们的宽度或厚度。

例如，考虑以下情况：

你有一个容纳200PX宽的盒子。您有两个较小的盒子要在200像素内均匀分布，这意味着两个较小的盒子中的每一个都应该是100PX宽，因为100PX + 100PX = 200PX，情况正常。

现在让我们假设您需要围绕这些盒子的1PX边框以及它们之间的10PX边距空间。如果您使用100PX作为您的盒子宽度，他们将无法坐在一起。为什么？如果您考虑左侧边框的1PX和右侧边框的1PX，则表示总边框宽度为4PX。然后是10PX的保证金空间。如果您使用100PX作为盒子的宽度，那么您有100 + 100 + 4 + 10 = 214PX因为214PX超过200PX，浮动中断。

要完成上述工作，您必须将盒子的宽度调整为每个93PX。每盒重新计算... 93PX + 2PX + 5PX = 100PX每箱2箱100PX * 2 = 200PX。

<小时/> 除了概念证据......

您的3个盒子中的每一个都有一个图像，其中的图像设置为500PX宽。为了适应所有3个，你需要至少1500PX的空间，不包括填充，边距或边框。

只需将width="500px"更改为width="100PX"即可使它们足够小，以便它们彼此相邻堆叠。看到这个小提琴：http://jsfiddle.net/EWuR8/2/

但请注意，如果将jsfiddle窗口缩小到足够窄，则框会再次中断。

水平定位Div

2 个答案: