Mise en page CSS simple - comment puis-je réaliser cette mise en page et la faire évoluer facilement?

Question

hey les gars, comment puis-je simplement réaliser cette mise en page simple? J'espère que la réponse m'aidera à comprendre les bases de la mise en page CSS et des flotteurs.

<div id="verticalElement1"> 
     <div id="horizontalElement1"> 
      some content 
     </div> 
     <div id="horizontalElement2"> 
      some content 
     </div> 
    <div> 
    <div id="verticalElement2"> 
     <div id="verticalElement3"> 
      some content 
     </div> 
     <div id="verticalElement4"> 
      some content 
     </div> 
    <div> 

Ok, donc, comme le s « id » suggèrent, je voudrais les éléments verticaux pour asseoir un sur haut de l'autre.

À l'intérieur de l'élément supérieur, j'aimerais que les 2 éléments horizontaux se trouvent suivant l'un à l'autre.

Je veux atteindre ce sans en appliquant "inline" à tous les éléments.

De plus, je ne veux pas utiliser le positionnement absolu, à moins qu'il ne s'agisse d'un élément relatif, et qu'il évolue bien.

Je voudrais réaliser tout cela avec des feuilles de style CSS très propres et évolutives, de manière à pouvoir ajouter et supprimer des éléments, sans avoir à modifier les valeurs de style. Tout doit être fait en appliquant simplement les classes appropriées à certains éléments, quelque chose comme ceci:

<div id="verticalElement1" class="containsHorizontalElements"> 
     <div id="horizontalElement1" class="isHorizontal"> 
      some content 
     </div> 
     <div id="horizontalElement2" class="isHorizontal"> 
      some content 
     </div> 
    <div> 
    <div id="verticalElement2"> 
     <div id="verticalElement3"> 
      some content 
     </div> 
     <div id="verticalElement4"> 
      some content 
     </div> 
    <div> 

J'ai essayé d'appliquer des flotteurs, mais tout devient fou .... aide!

acclamations

Answer 1

Vos conteneurs verticaux doivent simplement être affichés en tant que blocs, ce qui correspond par défaut aux tags div. Leurs contenus internes peuvent être flottants à gauche ou à gauche et à droite. Vous pouvez également définir des largeurs sur vos éléments horizontaux pour vous assurer qu'ils se retrouvent sur la même ligne.

votre code html peut ressembler à ceci:

<div id="container1" class="container"> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
</div> 
<div id="container2" class="container"> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
</div> 

css peut ressembler à ceci:

.inner-element { 
    float: left; 
    width: 100px; 
} 

aussi, vous devez vous rappeler pour effacer tous vos conteneurs qui contiennent des flotteurs:

.container {min-height: 10px;} 

.container:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 

bien sûr, vous voudriez nommer vos divs quelque chose de plus sémantiquement correct, comme "contenu" ou "wrapper" ou quelque chose comme ça qui décrit réellement leur but plutôt que comment ils sont censés regarder sur la page, à savoir nom quelque chose "content" au lieu de "left-column"

Answer 2

Pour les éléments horizontaux, vous voulez float: left; eux, et ils vont empiler les uns contre les autres.

Les éléments Vertical peuvent se chevaucher l'un l'autre simplement en déclarant display: block, ou width: 100%. Cela assurera qu'ils occupent tout l'espace horizontal, les faisant empiler les uns sur les autres.