div容器內的div水平對齊CSS？

與WP 3.0.4不能顯示我的css樣式的水平對齊的4個盒子（股利）內的容器股利。注意：同樣的CSS樣式可以在我的手工編碼的html/php網站上使用HTML 4.01 Transitional // EN正常工作。但WP 3.0.4顯示了四個箱子彼此分開，就像樓梯一樣。div容器內的div水平對齊CSS？

我使用FireFox 3.6.13，順便說一句。

CSS：

div .box-container { display: inline; 
margin: 0.63em 0pt; padding: 10px; 
width: 640px; background-color: 
rgb(229, 231, 225); position: 
relative; float: left; overflow: 
hidden; } 

div .small-box { border: 1px solid 
rgb(153, 51, 102); margin: 10px 5px; 
padding: 0.325em; float: left; 
background-color: rgb(255, 244, 227); 
width: 128px; line-height: 0.85em; 
max-height: 8em; min-height: 8em; 
position: relative; }

HTML是這樣的：

<div class="box-container"> 
<div class="small-box">SOME TEXT 
& IMAGE</div> <div 
class="small-box">SOME TEXT & 
IMAGE</div> <div 
class="small-box">SOME TEXT & 
IMAGE</div> <div 
class="small-box">SOME TEXT & 
IMAGE</div> 

</div>

盒容器的div寬度爲640像素，指定，但我注意到填充擴展它不止於此。在任何情況下，容納四個小盒子（總共512px加上總共40px的邊距）以及box-container div上的20px填充都足夠大。

我不明白爲什麼填充將推動box-container div的大小。但是當我嘗試使用max-width：640px時，我發現所有的盒子都垂直排列，box-container div的寬度不超過170px。

小方塊div實際上都是相同的大小，其內容由文字&圖像組成。

幫助？

來源

2011-02-09 Das

演示：http://jsfiddle.net/RasTq/ – 2011-02-09 14:31:20

謝謝，是的，這正是我期望從CSS中獲得的，但並不符合我的主題。非常有用的鏈接 - 將書籤！ – Das 2011-02-09 17:13:09

有些事情，我會嘗試： *顯示：（？您正在使用16px的字體大小和你的主題爲其他值）在容器塊*在 *字體大小聲明所有禮節重要 *顯示：塊小方塊

的[]

來源

2011-02-09 14:31:10

羅切斯特，顯示：在箱式容器和小盒子中都沒有改變任何東西。實際上，從我在Google上搜索這個難題的答案中看到的，大多數人都建議使用display：inline，而不是display：block。字體樣式在<範圍內聲明>標籤。文本和圖像按預期顯示。 – Das 2011-02-09 15:23:48

我認爲你需要從這些行刪除空格：

div .box-container 
div .small-box

這樣的：

div.box-container

然後，從div.box-container刪除padding規則。

要取回填充，請在div.box-container內添加包裝元素，並填充所需的填充。或者，您可以將div.small-box上的margin更改爲margin: 20px 0 20px 15px，而不是添加額外的元素，以使其看起來更接近。

來源

2011-02-09 14:50:53 thirtydot

謝謝你，十三。從div.box容器中移除填充確實使其恢復到正確的寬度，div.small-box上的邊距變化很好。但是，我仍然看到一個樓梯。 :(據我所知，聲明div.style或div .style或僅僅是.style並不重要，無論如何，我試過了，但沒有改變。 – Das 2011-02-09 15:18:26

我想我明白你的意思是樓梯。當我忘記用浮動左物體排列寬度/高度時，通常會發生在我身上。因此，就像每個小盒子試圖向左浮動一樣，但瀏覽器認爲在此之前盒子裏有東西，所以它將下一個盒子推到「下一行」。這是我一直在「階梯」外觀框中看到的一般邏輯。

您可能會嘗試先用設定的寬度和高度進行測試。並確保盒子符合他們的要求。然後去最大寬度和最大高度。

沒有截圖和/或更好的鏈接，這是所有我能說的:)

來源

2011-02-09 15:45:05 Weptile

發現了問題：WordPress的已經攪動了無效的HTML。當我去驗證CSS和HTML時，CSS檢查出乾淨，但HTML充滿了驚喜。我沒有意識到，直到我去瀏覽器的頁面源代碼，看到WordPress已經在很多的段落標籤和其他標籤，一些列表標籤，我當然沒有進入頁面編輯器。無論如何，HTML驗證器只是在box-container div中指出了一個段落結束標記。它沒有生意在那裏 - 甚至沒有開始段落標籤。

所以我回到了頁面編輯器，消除了我的HTML之間的所有空間，並更新了頁面。好極了！它的工作方式應該如此。

獲得的經驗：不信任WordPress驗證的HTML編輯器。

非常感謝那些已回覆的人。特別有用的是鏈接到http://jsfiddle.net，非常有用的工具，並保證我的CSS是正確的。

來源

2011-02-10 04:26:14 Das

div容器內的div水平對齊CSS？

回答

相關問題