div的內部父div並排與百分比寬度

我正在創建與百分比像div的第一，第三和第四列的屏幕寬度的20％和第二列40％的主頁副本。早些時候我使用bootstraps網格系統佈局，然後它工作，但很難管理給定百分比的列寬度，所以我將它改爲簡單的div與尊重的百分比，但現在所有的div都在另一個下而不是並排。div的內部父div並排與百分比寬度

Here

是的jsfiddle鏈接。

任何幫助將非常感激。

來源

2017-05-26 Ashvini Maurya

問題是，每個列將默認爲'display：block;'這會導致子成功的'div'在它們下面，而不是並列。解決這個問題的一個相對簡單的方法是簡單地將'.main-container'設置爲'display：flex;'[flexbox]（https://css-tricks.com/snippets/css/a-guide-to-那麼Flexbox /）。這是一個工作示例：[jsfiddle]（https://jsfiddle.net/7gy8vom4/2/）。更改在CSS的'282'行。 – varbrad

@varbrad，感謝這是一個愚蠢的錯誤。真的很有幫助。 –

嘗試使用flexbox。對於你的情況，適用以下規則父容器：

display: flex; 
align-items: stretch;

這將確保div的排隊並排側，他們都將是相同的高度。爲了確保第1,3列，第& 4都是相同的寬度，應用flex: 1給它們中的每一個。要使第2列的寬度爲其他列的兩倍，則應用flex: 2。

更新的jsfiddle這裏：https://jsfiddle.net/b0rds1ch/

如果您想了解更多關於Flexbox的（這是佈局非常有用）有關於CSS-技巧一great write-up。

來源

2017-05-26 22:18:28 Elliot

Flexbox對佈局非常有幫助。 – thewolff

您需要將float：left;在你的.col然後他們會並肩。

希望這有助於。

來源

2017-05-26 22:11:27

div的內部父div並排與百分比寬度

回答

相關問題