javascript - div 在父 div 内并排显示百分比宽度

Question

我正在创建 facebook 主页副本，其中 div 的百分比如第一、第三和第四列占屏幕宽度的 20%，第二列占屏幕宽度的 40%。早些时候我使用 Bootstrap 网格系统布局然后它工作但很难管理给定百分比的列宽所以我将它更改为具有尊重百分比的简单 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 的更多信息(它对布局非常有帮助)，请访问 great write-up关于 CSS 技巧。