P粉4784456712023-08-22 13:51:31
我知道這是一個非常老的問題。我在這裡發布這個問題的解決方案，使用了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！不需要使用浮動。
P粉8422150062023-08-22 11:58:42
我建議不要使用浮動來處理這種情況，我更傾向於使用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可以參考。