Dev Faq
0
votes

CSS HTML - centre div et alignement à gauche et à droite

Comment puis-je créer le div supérieur de la longueur horizontale complète du conteneur principal, tout en conservant les deux div suivants, .left et .right en flex pour chacun autre?

Pour ressembler à ceci - entrez la description de l'image ici 

<html>

<body>
  <div class="main">
    <div class="top">
      <h1>top</h1>
    </div>

    <div class="left">
      <h1>left</h1>
    </div>

    <div class="right">
      <h1>right</h1>
    </div>
  </div>
</body>

</html>
.main {
  border: 1px solid red;
  display: inline-flex;
}

.main div.top {
  border: 1px solid orange;
  width: auto;
  display: inline-block;
}

.main div.left {
  border: 1px solid blue;
}

.main div.right {
  border: 1px solid green;
}

2 commentaires

Êtes-vous prêt à ajouter plus div pour y parvenir? Ou vous voulez ce comportement tout en maintenant le même nombre d'éléments

@UtsavPatel Je suis ouvert à l'ajout de nouvelles div.

6 Réponses :

0
votes

Vous pouvez utiliser deux div pour créer des sections supplémentaires. 

<html>
<body>
  <div class="main">
    <div class="main__section1">
      <div class="top">
        <h1>top</h1>
      </div>
    </div>
    <div class="main__section2">
      <div class="left">
        <h1>left</h1>
      </div>
      <div class="right">
        <h1>right</h1>
      </div>
    </div>
  </div>
</body>
</html>
.main  {
  border: 1px solid red;
  display: flex;
flex-direction:column;
}

.main  div.top {
  border: 1px solid orange;
  width:auto; 
}

.main  div.left {
  border: 1px solid blue;
  flex:1
}

.main div.right {
  border: 1px solid green;
  flex:1 
}
   .main__section2 {
display:flex
   }

0 commentaires
0
votes

Vous pouvez essayer quelque chose comme ceci:

Je viens d'ajouter 2 div s supplémentaires si ce n'est pas un problème? 

<html>

<body>
  <div id="MainDiv">
    <div class="main">
      <div class="top">
        <h1>top</h1>
      </div>
      <div id="lower">
        <div class="left">
          <h1>left</h1>
        </div>

        <div class="right">
          <h1>right</h1>
        </div>
      </div>


    </div>
  </div>

</body>

</html>
#MainDiv {
  width: 200px;
  border: 1px solid red;
}

.main {
  width: auto;
  display: flex;
  flex-direction: column;
}

#lower {
  display: flex;
  flex-direction: row;
}

.left,
.right {
  width: 100px;
  border: 1px solid black;
}

0 commentaires
1
votes

Une autre façon de faire cela est d'utiliser la grille: 

<div class="main">
  <div class="top">   
    <h1>top</h1>
  </div>
  <div class="left">    
    <h1>left</h1>
  </div>
  <div class="right">    
    <h1>right</h1>
  </div>   
</div>

.main  {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
  padding: 4px;
}

.main  .top {
  border: 1px solid orange;
  grid-column: 1/3;
}

.main  .left {
  border: 1px solid blue;
}

.main .right {
  border: 1px solid green; 
}
.main  {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.main  .top {
  grid-column: 1/3;
}

0 commentaires
1
votes

Utilisez display: flex; et flex-wrap: wrap sur le conteneur parent, 100% de largeur sur le premier enfant et flex-grow: 1 sur les autres enfants, ou utilisez également des largeurs en pourcentage sur les deuxième et troisième DIV. 

<html>
<body>
    <div class="main">
<div class="top">   <h1>top</h1>
   </div>
      
 <div class="left">    <h1>left</h1>
</div>

<div class="right">    <h1>right</h1>
</div>
     
    </div>
</body>
</html>
* {
box-sizing: border-box;
}
.main  {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
}

.main  div.top {
  border: 1px solid orange;
  width:100%;
}

.main  div.left {
  border: 1px solid blue;
  width: 40%;
}

.main div.right {
  border: 1px solid green; 
  width: 60%;
}

0 commentaires
-1
votes 
    .main  {
    border: 1px solid red;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .main div .top {
    border: 1px solid orange;
    width:100%;
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .main  div.left {
    border: 1px solid blue;
    grid-column: 2;
    grid-row: 2;
  }

  .main div.right {
    border: 1px solid green;
    width: 100%;
    grid-column: 1;
    grid-row: 2;
  }
0 commentaires
1
votes

N'importe quelle largeur de .gauche et .right 

    <div class="main">
      <div class="top">
        <h1>top</h1>
      </div>
  
      <div class="left">
        <h1>left 11111111</h1>
      </div>
  
      <div class="right">
        <h1>right</h1>
      </div>
    </div>
.main {
      border: 1px solid red;
      display: flex;
      flex-wrap: wrap;
    }
    
    .main div.top {
      border: 1px solid orange;
      width: auto;
      display: inline-block;
      flex: 1 1 100%;
    }
    
    .main div.left {
      border: 1px solid blue;
      flex: 1 1 auto;
    }
    
    .main div.right {
      border: 1px solid green;
      flex: 1 1 auto;
    }

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor