Question

Voici mon scénario. J'ai un div conteneur qui a (n) éléments de l'enfant à l'intérieur. Pour ce cas permet de dire qu'il ya 2 divs dans le conteneur div:

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

Le conteneur div va être un pourcentage de la fenêtre, soit 80%. Maintenant, ce que je suis à la recherche est pour ces deux divs internes (col1 et col2) pour être en ligne avec l'autre et prendre la même quantité d'espace. Donc, le résultat devrait ressembler à ceci:

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+  

Ou si la largeur du conteneur est modifié devrait se traduire par quelque chose comme ceci:

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

Les divs internes sont toujours de même largeur et ont une certaine séparation les uns des autres. Ceci est similaire à une disposition de la table, mais je préfère ne pas utiliser des tableaux si possible. J'ai essayé différentes techniques comme flottantes et d'afficher les divs en ligne en vain. Ils ne peuvent jamais sembler aligner juste.

Était-ce utile?

La solution

Les cellules de table peuvent étirer automatiquement. Il est pas tout à fait possible avec div, donc vous devez spécifier la largeur appropriée pour chaque colonne à la main. Par exemple:

#col1, #col2 {
    float: left;
    width: 50%;
}

Autres conseils

faire des durées de col1 et col2 (pas divs) avec

vertical-align:top
display:inline-block
width:50%

évidemment (ajuster la largeur pour tenir compte de vos marges / padding et a recommandé que vous utilisez des pourcentages pour les marges / padding afin qu'ils ajoutent à un peu moins de 100%, voir:. http://ejohn.org/blog/sub-pixel-problems-in-css/ )

Ma solution préférée

Utilisation de positionnement par rapport au récipient externe:

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

Notez que vous laissez à peu près la même 2% au milieu. Le #col1 et #col2 devraient être alignés maintenant.

Autres solutions

Avec CSS3: utiliser column-count: 2 et briser la colonne après la première div.

Si vous vous sentez vraiment comme flotter, faire que #col1 { float: left; width: 50%; }

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

Peut-être l'utilisation de display: table; aiderait? http://jsfiddle.net/g4dGz/119/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top