简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment réaliser un positionnement horizontal de trois divs en HTML ?
P粉419164700
P粉419164700 2023-08-21 19:20:03
0
2
517
<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>
P粉419164700
P粉419164700

répondre à tous(2)
P粉478445671
P粉4784456712023-08-22 13:51:31 2 plancher

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:flex dans le récipient ! Pas besoin d'utiliser des flotteurs.

Comme +0
Ajouter une réponse
P粉842215006
P粉8422150062023-08-22 11:58:42 1 plancher

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 :

  • Les styles en ligne sont mauvais pour la maintenabilité
  • Il ne devrait y avoir aucun espace dans les noms des sélecteurs
  • Vous avez ignoré certaines balises HTML importantes, telles que <head>和<body>
  • Vous n'avez pas inclus doctype

Voici 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.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！