在另一個div內收縮可變數字，寬度和高度的浮動div div

爲了實現各種可變數量，寬度和高度的div的匹配高度，我使用了一個jQuery腳本，它要求這些div是浮動的。不過，我希望他們居中，所以我使用相對位置技巧來居中。在另一個div內收縮可變數字，寬度和高度的浮動div div

CSS

div#cardwrap { 
border:3px purple solid; 
float:left; 
position: relative; 
left:50%; 
} 

div#centermaster { 
text-align:center; 
border:1px yellow solid; 
float:left; 
position: relative; 
left:-50%; 
} 

div.cardtable { 
float:left; 
padding:35px; 
border:1px green solid; 
}

HTML

<div id=cardwrap> 
    <div id=centermaster> 
     <div class=cardtable>Images</div> (variable number) 
     ... 
    </div> 
</div>

這將很好地工作，但我似乎無法得到包裝上，以正確地拆封。在圖像加載之前，它看起來很好initially - 黃色包裝正在將綠色的div對齊。但隨着圖像加載，綠色divs換行到下一行，我做想要的。但是，gap出現在右側，這樣黃色div不再收縮包裝，因此不會集中它們。我怎樣才能保持黃色的div匹配無論多綠色的div可以適合連續的寬度？

另一種均衡div高度同時集中它們的方法也很受歡迎。

（在給定可變內容的情況下，是否還有腳本來均衡某些div類的寬度？）基本上，最終目標是將綠色div分爲表格式格式，同時適應可變屏幕大小和內容。

來源

2011-08-11 Amy

不知道究竟你想要的，但我認爲，你需要內嵌塊在這裏，像這樣：http://jsfiddle.net/TSpXZ/

爲了使他們在IE瀏覽器中添加以下的條件註釋：

div.cardtable { 
    display:inline; 
    zoom:1; 
}

並嘗試使用內聯塊進行更多實驗 - 它們非常棒！

來源

2011-08-11 10:46:24 kizu

哦！我從內嵌塊開始，但我沒有使用「vertical-align：top;」。這給了我我正在努力的行爲！然而，我正在幫助解決這個難題的朋友提醒我，如果我們最後在cardtable上有邊界，如果高度相同（當前發生在jQuery腳本之後），看起來效果最好。但是，如果我沒有回答有關差距的問題，我可能會回來接受這個答案。感謝您的建議（甚至包括IE條件）！ – Amy

在另一個div內收縮可變數字，寬度和高度的浮動div div

回答

相關問題