Comment réaliser un positionnement horizontal de trois divs en HTML ?
P粉419164700
2023-08-21 19:20:03
<p>Je crée un exemple de site Web avec trois partitions horizontales.
Je veux que la partition la plus à gauche ait une largeur de 25 %, celle du milieu une largeur de 50 % et la partition de droite une largeur de 25 % afin que les partitions remplissent 100 % de l'espace horizontalement. </p>
<pre class="brush:php;toolbar:false;"><html>
<titre>
Titre du site Web
</titre>
<div id="le tout" style="hauteur:100%; largeur:100%" >
<div id="leftThing" style="position : relative ; largeur : 25 % ; couleur d'arrière-plan : bleu;">
menu de gauche
</div>
<div id="content" style="position : relative ; largeur : 50 % ; couleur d'arrière-plan : vert;">
contenu aléatoire
</div>
<div id="rightThing" style="position : relative ; largeur : 25 % ; couleur d'arrière-plan : jaune ;">
menu de droite
</div>
</div>
</html></pre>
<p>https://i.stack.imgur.com/NZDJe.jpg</p>
<p>Lorsque j'exécute ce code, les divs semblent se chevaucher. Je veux qu'ils apparaissent côte à côte ! </p>
<p>Que dois-je faire ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je sais que c'est une très vieille question. Je publie ici une solution à ce problème, en utilisant FlexBox. Voici la solution :
#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>Ajoutez simplement
display:flexdans le récipient ! Pas besoin d'utiliser des flotteurs.Je recommande de ne pas utiliser de flotteurs pour gérer cette situation, je préfère utiliser
inline-block.Quelques points supplémentaires à considérer :
<head>和<body>doctypeVoici une meilleure façon de formater votre document :
<!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>Voici également un jsFiddle pour référence.