div的内部父div并排与百分比宽度

Question

我正在创建与百分比像div的第一，第三和第四列的屏幕宽度的20％和第二列40％的主页副本。 早些时候我使用bootstraps网格系统布局，然后它工作，但很难管理给定百分比的列宽度，所以我将它改为简单的div与尊重的百分比，但现在所有的div都在另一个下而不是并排。

Here

是的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-技巧一great write-up。

Answer 2

您需要将float：left;在你的.col然后他们会并肩。

希望这有助于。