如何使用 CSS 建立寬度相等的並排 Div？

使用CSS 自動等寬的並排Div

要建立在父div 中自動採用相等寬度的子div，利用CSS 的display : table 屬性的力量。這種方法雖然不被 IE7 支持，但在現代瀏覽器中有效地達到了預期的結果。

解決方案：

1. 設定父級 div 顯示：table 和表格版面：固定。這會建立一個類似表格的結構。
2. 設定要顯示的子 div：table-cell。這會將它們視為表格單元格，從而獲得相等的寬度。
3. 依需求調整父 div 的寬度和高度屬性。

範例程式碼：

CSS：

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

HTML：

<div>

示範：

訪問以下JSFiddle查看實際解決方案的連結：

• 三個div：http://jsfiddle.net/g4dGz/
• 兩個div：http://jsfiddle.net/g4dGz/1 /

以上是如何使用 CSS 建立寬度相等的並排 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！