84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我正在创建一个样本网站，其中有三个水平分区。 我希望最左边的分区宽度为25％，中间的分区宽度为50％，右边的分区宽度为25％，以便分区水平填满100％的空间。
网站标题 左侧菜单 随机内容 右侧菜单
https://i.stack.imgur.com/NZDJe.jpg
当我执行这段代码时，divs会重叠显示。我希望它们并排显示！
我该怎么做？
我知道这是一个非常老的问题。我在这里发布这个问题的解决方案，使用了FlexBox。下面是解决方案：
#container { height: 100%; width: 100%; display: flex; } #leftThing { width: 25%; background-color: blue; } #content { width: 50%; background-color: green; } #rightThing { width: 25%; background-color: yellow; }
左侧菜单 随机内容 右侧菜单
只需要在容器中添加display:flex！不需要使用浮动。
display:flex
我建议不要使用浮动来处理这种情况，我更倾向于使用inline-block。
inline-block
还有一些需要考虑的要点：
doctype
这是一个更好的格式化文档的方式：
这里还有一个jsFiddle供参考。
我知道这是一个非常老的问题。我在这里发布这个问题的解决方案，使用了FlexBox。下面是解决方案：
#container { height: 100%; width: 100%; display: flex; } #leftThing { width: 25%; background-color: blue; } #content { width: 50%; background-color: green; } #rightThing { width: 25%; background-color: yellow; }只需要在容器中添加
display:flex！不需要使用浮动。我建议不要使用浮动来处理这种情况，我更倾向于使用
inline-block。还有一些需要考虑的要点：
和doctype这是一个更好的格式化文档的方式：
这里还有一个jsFiddle供参考。