0

我试图水平定位 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/

4

2 回答 2

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;}
于 2013-05-02T14:53:43.370 回答
1

提供一些百分比宽度。这里有一个问题，你必须将其他东西计算到你的宽度中。例如，如果您有填充、边框或边距，则还必须考虑它们的宽度或厚度。

例如考虑以下情况：

您有一个 200PX 宽的收纳盒。您有两个较小的盒子，您想在 200 px 内均匀分布，这意味着两个较小的盒子中的每一个都应该是 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"towidth="100PX"使它们足够小，可以很好地堆叠在一起。看到这个小提琴：http: //jsfiddle.net/EWuR8/2/

但是请注意，如果您将 jsfiddle 窗口缩小到足够窄，则框将再次破裂。

于 2013-05-02T14:55:15.637 回答