- 原生基础
- HTML| CSS| HTML5| CSS3| JavaScript
最新推荐
-
30分钟学会网站布局
152542 人学习
最新推荐
-
你的第一行 UNI-APP 代码
5487 人学习
-
Flutter 从头到应用启动
7821 人学习
最新推荐
-
AXURE 9视频教程（适合产品经理交互产品设计UI）
3350 人学习
-
零基础PS视频教程
180660 人学习
-
16天带你入门UI视频教程
48569 人学习
-
PS技巧和切片技巧视频教程
18603 人学习
最新推荐
-
阿里云环境搭建以及项目上线视频教程
40936 人学习
-
计算机网络概述——程序员必须掌握的基础知识
1549 人学习
-
程序员必备教程——HTTP协议讲解
1183 人学习
-
Websocket视频教程
32909 人学习
我知道这是一个非常老的问题。我在这里发布这个问题的解决方案，使用了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; }<div id="container"> <div id="leftThing"> 左侧菜单 </div> <div id="content"> 随机内容 </div> <div id="rightThing"> 右侧菜单 </div> </div>只需要在容器中添加
display:flex！不需要使用浮动。我建议不要使用浮动来处理这种情况，我更倾向于使用
inline-block。还有一些需要考虑的要点：
<head>和<body>doctype这是一个更好的格式化文档的方式：
<!DOCTYPE html> <html> <head> <title>网站标题</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">左侧菜单</div> <div id="middle">随机内容</div> <div id="right">右侧菜单</div> </div> </body> </html>这里还有一个jsFiddle供参考。