简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wie erreicht man eine horizontale Positionierung von drei Divs in HTML?
P粉419164700
P粉419164700 2023-08-21 19:20:03
0
2
518
<p>Ich erstelle eine Beispielwebsite mit drei horizontalen Partitionen. Ich möchte, dass die Partition ganz links 25 % breit ist, die mittlere Partition 50 % breit und die rechte Partition 25 % breit, sodass die Partitionen horizontal 100 % des Raums ausfüllen. </p> <pre class="brush:php;toolbar:false;"><html> <Titel> Webseitentitel </title> <div id="das Ganze" style="height:100%; width:100%" > <div id="leftThing" style="position: relative; width:25%; background-color:blue;"> linkes Menü </div> <div id="content" style="position: relative; width:50%; background-color:green;"> zufälliger Inhalt </div> <div id="rightThing" style="position: relative; width:25%; hintergrundfarbe:gelb;"> rechtes Menü </div> </div> </html></pre> <p>https://i.stack.imgur.com/NZDJe.jpg</p> <p>Wenn ich diesen Code ausführe, erscheinen die Divs überlappend. Ich möchte, dass sie nebeneinander erscheinen! </p> <p>Was soll ich tun? </p>
P粉419164700
P粉419164700

Antworte allen(2)
P粉478445671
P粉4784456712023-08-22 13:51:31 2 Etage

我知道这是一个非常老的问题。我在这里发布这个问题的解决方案，使用了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！不需要使用浮动。

Wie +0
Antwort hinzufügen
P粉842215006
P粉8422150062023-08-22 11:58:42 1 Etage

我建议不要使用浮动来处理这种情况，我更倾向于使用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供参考。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！