web-dev-qa-db-fra.com

Comment positionner trois divs en html horizontalement?

Je crée un exemple de site Web comportant trois divisions horizontales. Je veux que la division la plus à gauche ait une largeur de 25%, la médiane une largeur de 50% et une droite, une largeur de 25% afin que les divisions remplissent tout l'espace à 100% horizontalement.

<html>
    <title>
    Website Title
    </title>

    <div id="the whole thing" style="height:100%; width:100%" >

        <div id="leftThing" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="content" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div>
</html>

http://imgur.com/j4cJ

Quand j'exécute ce code, les divs apparaissent les uns sur les autres. Je veux qu'ils apparaissent l'un à côté de l'autre!

Comment puis-je faire ceci?

htmlcsslayoutposition
49
Akhil

Je m'abstiendrais d'utiliser des flotteurs pour ce genre de chose; Je préfère utiliser inline-block.

Quelques autres points à considérer:

  • Les styles en ligne sont mauvais pour la maintenabilité
  • Vous ne devriez pas avoir d'espaces dans les noms de sélecteur
  • Vous avez manqué des balises HTML importantes, comme <head> et <body>
  • Vous n'avez pas inclus un doctype

Voici un meilleur moyen de formater votre document:

<!DOCTYPE html>
<html>
<head>
<title>Website 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">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

Voici un jsFiddle pour faire bonne mesure.

33
Jezen Thomas

Je sais que c'est une très vieille question. Il suffit de poster ceci ici car j'ai résolu 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">
    Left Side Menu
  </div>

  <div id="content">
    Random Content
  </div>

  <div id="rightThing">
    Right Side Menu
  </div>

</div>

Il suffisait d'ajouter display:flex au conteneur! Aucun flotteur requis.

21
Maaz Syed Adeeb

Vous pouvez utiliser éléments flottants comme suit:

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
    <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
    <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
    <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>

Notez le débordement : hidden; sur le conteneur parent afin de faire en sorte que le parent ait les mêmes dimensions que les éléments enfants (sinon, il aura une hauteur de 0).

11
Paul Aldred-Bann

Le moyen le plus simple
Je vois que la question a reçu une réponse, je donne cette réponse à ceux qui auront cette question à l'avenir

Ce n’est pas une bonne pratique de coder en ligne css, et aussi [~ # ~] id [~ # ~] pour tous les divs intérieurs, essayez toujours d’utiliser classe pour le style. L’utilisation de CSS en ligne est une très mauvaise pratique si vous essayez d’être un concepteur Web professionnel.

dans votre question, j'ai donné une classe wrapper pour la div mère et toutes les divs internes sont des divs enfants dans CSS. Vous pouvez appeler les divs internes en utilisant nth-child sélecteur.

Je veux signaler quelques choses ici

1 - N'utilisez pas de CSS en ligne (c'est une très mauvaise pratique)

2 - Essayez d'utiliser des classes à la place des identifiants car si vous donnez un identifiant, vous ne pourrez l'utiliser qu'une seule fois, mais si vous utilisez une classe, vous pouvez l'utiliser plusieurs fois et vous pouvez aussi les styler en utilisant cette classe afin d'écrire moins de code.

lien codepen pour ma réponse

https://codepen.io/feizel/pen/JELGyB

            .wrapper{width:100%;}
            .box{float:left; height:100px;}
            .box:nth-child(1){
               width:25%;
               background-color:red; 
        
            }
            .box:nth-child(2){
               width:50%;
              background-color:green; 
            }
            .box:nth-child(3){
               width:25%;
              background-color:yellow; 
            }</ code>
 
    <div class="wrapper">
        <div class="box">
        Left Side Menu
        </div>
        <div class="box">
        Random Content
        </div>
        <div class="box">
        Right Side Menu
        </div>
    </div>
 10 
Faizal Munna
Vous ajoutez un
float: left;

au style des 3 éléments et assurez-vous que le conteneur parent a
overflow: hidden; position: relative;

cela garantit que les flotteurs prennent de la place.
<html>
    <head>
        <title>Website Title </title>
    </head>
    <body>
        <div id="the-whole-thing" style="position: relative; overflow: hidden;">
            <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
                Left Side Menu
            </div>
            <div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
                Random Content
            </div>
            <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
                Right Side Menu
            </div>
        </div>
    </body>
</html>

Veuillez également noter que la largeur: 100% et la hauteur: 100% doivent être retirées du conteneur, sinon le troisième bloc sera renvoyé à une deuxième ligne.
 5 
NKCSS
Débarasse-toi du position:relative; et le remplacer par float:left; et float:right;.
Exemple dans jsfiddle: http://jsfiddle.net/d9fHP/1/
        <html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
    <div id="leftThing" style="float:left; width:25%; background-color:blue;">
         Left Side Menu
    </div>
    <div id="content" style="float:left; width:50%; background-color:green;">
         Random Content
    </div>
    <div id="rightThing" style="float:right; width:25%; background-color:yellow;">
         Right Side Menu
    </div>
</div>
</html>​

 1 
MNilson