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

Question

我創建的div主頁的副本具有div的百分比，例如屏幕寬度的20％的第一，第三和第四列和40％的第二列。 之前我使用引導網格系統布局，但當時可以正常工作，但很難按給定的百分比管理列寬，因此我將其更改為具有受尊重百分比的簡單div，但現在所有div都是一個接一個的而不是並排的。

這里

是jsfiddle鏈接。

任何幫助將非常感激。

Answer 1

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

display: flex;
align-items: stretch;

這樣可以確保div並排排列，並且高度都相同。 為了確保第1、3和4列都具有相同的寬度，請對每個列應用flex: 1 。 要使第2列的寬度是其他列的兩倍，請應用flex: 2 。

在這里更新了jsfiddle： https ://jsfiddle.net/b0rds1ch/

如果您想了解更多關於Flexbox的（這是布局非常有用）有一個偉大的寫了對CSS-技巧。

Answer 2

你需要把float：left; 在您的.col中，則它們將並排放置。

希望這可以幫助。