Comment définir la largeur dynamique DIVs
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.
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/