HTML中如何實現三個div的水平定位？
P粉419164700
2023-08-21 19:20:03
<p>我正在創建一個樣本網站，其中有三個水平分區。
我希望最左邊的分區寬度為25％，中間的分區寬度為50％，右邊的分區寬度為25％，以便分區水平填滿100％的空間。 </p>
<pre class="brush:php;toolbar:false;"><html>
<title>
網站標題
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
左側選單
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
隨機內容
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
右側選單
</div>
</div>
</html></pre>
<p>https://i.stack.imgur.com/NZDJe.jpg</p>
<p>當我執行這段程式碼時，divs會重疊顯示。我希望它們並排顯示！ </p>
<p>我該怎麼做？ </p>
我知道這是一個非常老的問題。我在這裡發布這個問題的解決方案，使用了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。還有一些需要考慮的要點：
- 內聯樣式對於可維護性來說不好
- 選擇器名稱中不應該有空格
- 你忽略了一些重要的HTML標籤，像是
- 你沒有包含
#<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可以參考。