水平定位Div

我试图水平定位3个div块，但3个块定位在一条新线上。也调整大小时，我希望他们不要移动。水平定位Div

.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/

来源

2013-05-02 Dynamiite

为什么选择投票？ – Dynamiite 2013-05-02 14:44:16

你需要给你的div宽度。现在它们是浮动的，但不是你想要的，因为它们使用了填充空间的默认宽度。因此，堆栈。 – Swordfish0321 2013-05-02 14:47:23

你需要使你的包装箱周围的包装足够宽或明显不适合... – 2013-05-02 14:49:29

盒子的其余都太宽的容器。我在这里只使用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-02 14:53:43 MDez

抱歉，不减少，扩大！ :) – MDez 2013-05-10 13:18:16

提供一定比例的宽度。这里有一个问题，你必须根据你的宽度计算其他东西。例如，如果您有填充，边框或边距，则必须考虑宽度或厚度。

例如考虑以下情况：

你有一个收纳盒是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窗口足够窄，箱子会再次打破。

来源

2013-05-02 14:55:15 Michael

回答

相关问题