CSS 3動態列，同寬度對齊頂部

我的CSS：

#sidebar { 
    width: 100%; 
    background-color: blue; 
} 

#sidebar div { 
    width: 33%; 
    display: inline-block; 
} 

#sidebar-left { 
    background-color: green; 
} 

#sidebar-center { 
    background-color: red; 
} 

#sidebar-right { 
    background-color: yellow; 
} 

#sidebar li { 
    list-style: none; 
}

我的問題：

我想要的3列與一行完全一致相同的寬度和對齊的頂部。這3列的內容應該是動態的，這意味着高度應該自動改變到最大高度。我們不知道3列中哪列最高，所以這也應該是動態的。

我目前的解決方案是在JSFiddle，我嘗試過其他的東西，如「顯示：表」但是這是更糟糕......

I've tried this, but it didn't work for me...

來源

2014-03-25 ReeCube

我敢肯定你不能用純CSS做到這一點，你需要有用一些JavaScript給所有3列相同的高度寬度的動態內容。 – Sebsemillia

這裏是純CSS solution

的HTML內在張力結構是一樣的，只是我改變了幾行字在你的CSS。我分配了#sidebardisplay to 表。

然後，分配#sidebar> DIV到顯示作爲相等的高度，以所有列中的表小區。爲了提高表單UI添加此代碼

div.form-group input, div.form-group textarea { 
    clear:both !important; 
    float:none; 
    margin:5px; 
    display:block; 
}

爲了進一步瞭解詳情請參閱本URL

希望這將是

來源

2014-03-26 09:19:44

**令人驚歎的**，正是我所期待的，非常感謝，*我已經更新了小提琴以滿足我的需求（http://jsfiddle.net/3YGdL/19/)* – ReeCube

這是你想要的？

JSFIDDLE

請記住display:inline-block默認爲基準，所以你必須將其設置vertical-align:top，加上inline-block的創建空格，你可以看到解決方案，在這裏：

INLINE-BLOCK FIXES

UPDATE

現在，我仔細閱讀了你的問題我知道你想同樣的高度爲3列，所以我給你一些方法鏈接以實現：

Fluid Width Equal Height Columns

希望它能幫助！

來源

2014-03-25 21:58:17 dippas

哇，這真棒，但爲什麼聯繫表格被破壞，我該如何解決這個問題？ – ReeCube

對不起，由於時區，我無法及早回覆你。我不知道你想要你的聯繫表格也是固定的，因爲你沒有提到你的問題（我以爲它只是關於列） – dippas

下面是一個簡單的jQuery腳本的解決方案：Example

首先我給每一個部分類.column更容易對付它們。

然後我得到每個元素的高度，並將最高高度應用於所有元素。

heightArrayHeading = []; 
$('.column').each(function() { 
    $(this).css('height', ''); 
    heightArrayHeading.push($(this).outerHeight()); 
}); 

$('.column').css('height', Math.max.apply(Math, heightArrayHeading));

最後我給.columnvertical-align:top;對準他們在上面。

來源

2014-03-25 22:01:44 Sebsemillia

哇，這很棒，但爲什麼聯繫表被破壞，怎麼可能我解決這個問題？ – ReeCube

CSS 3動態列，同寬度對齊頂部

回答

相關問題