简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

HTML中如何實現三個div的水平定位？

<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>
P粉419164700P粉419164700425 天前523

全部回覆(2)我來回復

  • P粉478445671

    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！不需要使用浮動。

    回覆
    0
  • P粉842215006

    P粉8422150062023-08-22 11:58:42

    我建議不要使用浮動來處理這種情況，我更傾向於使用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可以參考。

    回覆
    0
  • 取消回覆