Pourquoi ces balises Div ne s'emboîtent-elles pas correctement?

Question

Si quelqu'un peut donner un aperçu ici, il serait très apprécié. Je veux créer une sortie qui montre des réservations dans des cours de fitness à différentes dates. L'idée est d'avoir trois lignes et autant de lignes sont nécessaires pour couvrir toutes les dates. Pour ce faire, j'aimerais utiliser CSS plutôt que de recourir à des tables.

Ok, donc j'ai les définitions CSS suivantes:

.ListSetContainer 
{ 
    background-color:Red; 
    border:1px solid #999999; 
    text-align:center; 
} 

.ListSet 
{ 
    margin: 2px 2px 2px 16px; 
    float: left; 
    clear:none; 
} 

.ListSet ul 
{ 
    background-color: #EEEEEE; 
    border: 1px solid #999; 
    margin: 2px 2px 16px 2px; 
    padding: 6px 6px 0px 6px; 
} 

Et le code HTML suivant:

<div style="clear:both;"> 
    <h4>Class Dates, Counts and Participants</h4> 
    <div class='ListSetContainer'> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
    </div> -- End of First ListSetContainer 

    <div class='ListSetContainer'> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
     <div class='ListSet'> 
     <ul>...{Class information here...} 
     </ul> 
     </div> 
    </div> -- End of Second ListSetContainer 
    </div> -- End of surrounding Div 

Mais plutôt que d'obtenir trois divs disposées horizontalement, suivie d'une deuxième rangée avec deux divs , je reçois ceci:

Linked Image

Quelques notes. Tout d'abord, notez que la hiérarchie dans le HTML (divs ListSetContainer contient les divs ListSet) n'est pas reflétée dans la sortie. Deuxièmement, le div ListSetContainer est seulement un pixel haut - il n'y a pas d'arrière-plan montré! (J'utilise un fond rouge juste pour être sûr que je ne le rate pas). Le div englobant est simplement écrasé et les divs internes flottent d'eux-mêmes. La définition manuelle de la hauteur ne fonctionne pas car la div interne avec la liste est variable en hauteur (et cela semble étrange, pour démarrer). Si j'enlève le flotteur: à gauche; des divs internes, ils se développent pour être la pleine largeur de l'écran et ainsi je ne peux pas obtenir trois dans une rangée. Alors ... je suis à perte.

Encore une fois, merci pour toute aide que vous pouvez offrir!

Answer 1

C'est parce que le ListSetContainer n'a pas de largeur définie. Je m'attends à ce qu'ils se rangent tous sur une ligne sur un moniteur à écran large.

Vous pouvez essayer:

.ListSetContainer { 
    width: 300px; 
} 

.ListSet { 
    clear: none; 
    float: left; 
    width: 100px; 
} 

et le style approprié.

Answer 2

Votre ListSetContainer doit contenir un contenu non flottant pour qu'il ait une hauteur/largeur. Faire flotter un élément le sort de la hiérarchie de mise en page normale et ainsi le conteneur, contenant uniquement les ListSets, ne contient rien qui soit rendu normalement. Ajouter un espace insécable au conteneur, alors vous devriez être en mesure de définir sa largeur/hauteur car il y aura quelque chose à rendre.

Je voudrais également que votre ListSetContainer utilise clear: both. Cela devrait le faire démarrer une nouvelle "ligne" de ListSets.

Answer 3

Utilisez clear:both pour le bloc .ListSetContainer.

Mais vous pouvez encore améliorer cela en utilisant une seule liste:

<style type="text/css"> 
    .ListSetContainer { 
     list-style: none; 
     padding: 0; 
    } 
    .ListSetContainer li { 
     width: 33.333%; 
     float: left; 
    } 
    .ListSetContainer li li { 
     width: auto; 
     float: none; 
    } 
</style> 
<ul class="ListSetContainer"> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
    <li><ul><li>...{Class information here...}</li></ul></li> 
</ul> 

Answer 4

Le problème réside dans le fait que votre classe a besoin de ListSet « display: block; » ajoutant ou "float: left;" En supprimant et en ajoutant le bloc, ajoutez "display: block; width: 100%" à la classe ListSetContainer.

Answer 5

Vous présentez des données tabulaires avec un ensemble fixe de colonnes - une par mois. On dirait que les tables étaient censées être utilisées. Maintenant est votre chance d'utiliser des tables et ne pas se sentir coupable de le faire!Maintenant, si vous n'utilisez pas de tables, vous devez corriger la taille de chaque élément, mais pas le nombre d'éléments par ligne. Laissez le nombre de colonnes être déterminé par la taille de la fenêtre du navigateur. A défaut, je pense que vous avez besoin d'un clear: both entre chaque rangée.