水平定位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

回答

相關問題