集中在一個容器內的多浮動div

好的，這裏是我正在工作的網站的鏈接。 http://danberinger.com/preview.html 集中在一個容器內的多浮動div

我目前在它自己的div（#messagebox）和它自己的div（#picture）中有圖片。這兩個div都浮在左邊。我把它們放在一個稱爲#intro_container的容器div裏面。我想以此爲中心包含div，但遇到問題。我試圖將邊距設置爲0和自動，但沒有奏效。這一定是我嘗試使用的不同級別的div的數量的某種問題....

任何幫助將不勝感激！

來源

2010-01-20 Dan

在您的#intro_container容器上設置寬度，否則margin: 0 auto;將不起作用。

來源

2010-01-20 19:55:26

啊我認爲可能是問題....所以我必須計算的寬度至少其中2 div的寬度，然後我應該可以設置邊距：0 auto;？ – Dan 2010-01-20 19:59:36

是的，如果它小於兩個div的寬度，那麼浮動的div就會堆疊在彼此之上。如果它更大，它會顯得偏離中心。一定要考慮任何邊距或填充，因爲這會增加寬度。 – 2010-01-22 17:51:34

對於0自動工作，您必須指定一個寬度。

您可以將所有內容放在容器div中，例如寬度900px margin 0 auto，或者您可以將這些樣式應用於介紹容器。

現在你的CSS縮放一切到視口寬度，所以左邊的float將圖片發送到intro_container的寬度，它沒有定義的寬度。

另外請注意，您可以將您的ID直接應用於圖像！無需將其包裝在div中。對元素進行語義設置是一種很好的做法。

來源

2010-01-20 20:00:35 DeaconDesperado

有時這是很好的中心這樣的事情：

<html> 
<head> 
</head> 
<body> 
<div style="position:relative;width:400px;height:400px;background-color:green"> 

    <div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red"> 
here attribute 'left' is half of this container width 
    </div> 
</div> 
</body> 
</html>

一直致力於

來源

2010-01-20 20:03:01 dfens

集中在一個容器內的多浮動div

回答

相關問題