CSS對齊3個div的水平

我有對準父DIV內部的三個div的一個問題

|IMAGE| +TEXT+ |IMAGE|

每個div包含影像（2）和文本（1）分別。對齊它們很容易，問題是我希望CENTER div自動調整到瀏覽器窗口的大小，並將其他IMAGE div始終分別放在左側和右側。

像這樣的事情，例如，如果用戶將窗口最大化：

正如你所看到的，這個想法是，中心DIV的增長，和經銷商的寬度，但保持結構。

我怎麼能得到這種行爲？提前致謝。

來源

2010-09-02 lidermin

#container { text-align: center; } 
#div-1 { float: left; } 
#div-2 { display: inline; } 
#div-3 { float: right; }

如果這仍然不符合您的要求，請給出更詳細的要求。

來源

2010-09-02 15:31:49

這正是我一直在尋找。我錯過了div-2顯示內聯部分。謝謝。 – lidermin 2010-09-02 17:41:49

只是一個參考，如果您的DIV沒有內容，並且您只是使用它們來保存背景圖像，您可能需要使用'display：inline-block;'而不是'display：inline;'。我意識到被問的問題並非如此，但這是引發了很多人的事情。 – 2013-01-21 01:58:18

下面是三個圖像並排另一內嵌執行：

<div style="text-align:center"> 

    <div style="float: left"><img src="image1.png"/></div> 

    <div style="display: inline"><img src="image2.png"/></div> 

    <div style="float: right"><img src="image3.png"/></div> 

</div>

來源

2012-07-30 14:50:45 Ian

+16

這似乎是與內聯樣式完全相同的實現。 – Jack 2012-07-30 15:11:31

CSS對齊3個div的水平

回答

相關問題