div并排显示父div中的百分比宽度

Question

我正在创建facebook主页副本，其中div为百分比，如屏幕宽度的20％的第一，第三和第四列以及40％的第二列。 之前我使用bootstraps网格系统布局然后它正在工作，但很难管理给定百分比的列宽，所以我把它改成了具有相应百分比的简单div，但现在所有的div都是一个在另一个之下而不是并排。

Here

是jsfiddle链接。

任何帮助都会非常感激。

Answer 1

尝试使用flexbox。对于您的情况，请将以下规则应用于父容器：

display: flex;
align-items: stretch;

这将确保divs并排排列，并且它们都将是相同的高度。确保第1,3列和第1列4都是相同的宽度适用于flex: 1每个。要使列2的宽度为其他列的两倍，请应用flex: 2。

在此处更新了jsfiddle：https://jsfiddle.net/b0rds1ch/

如果您想了解有关flexbox的更多信息（它对布局非常有帮助），CSS-Tricks上有great write-up。

Answer 2

你需要把浮动：左;在你的.col然后他们会并排。

希望这会有所帮助。