La meilleure façon de “clear: both”

Pour longtemps, j'ai été en utilisant une classe CSS appelé clear, qui a seulement la règle clear: both. Je l'utilise de la façon suivante (montré dans Django-syntaxe, mais c'est sans importance):

{% for item in collection %}
  <ul class="horiz"><!-- horizontal list -->
    <li>{{ item }}</li>
    <li>{{ item }}</li>
  </ul>
  <div class="clear"></div>
{% endfor %}

Comme vous pouvez le voir, je suis en train de faire un tas de listes horizontales, pour le faire paraître comme une table. Imaginez que la règle CSS .horiz li implique float: left. Note que je suis en utilisant <div class="clear"></div> après chaque ligne de ce tableau, beaucoup de code HTML pour quelque chose de si simple.

Est-ce vraiment la voie à suivre? N'est-ce pas là, rien de plus simple que je n'en ai pas pensé?

  • C'est un idiot de se poser la question, mais les choses que l'on pose sur la être considérées comme des données tabulaires?
  • je sais que c'est fermé, mais ma réponse (juste googlé un problème similaire et trouvé cette page est un conteneur avec trop-plein automatique: quirksmode.org/css/clearing.html
InformationsquelleAutor Deniz Dogan | 2009-08-06
  1. 7

    Est-il une raison pour laquelle vous ne pouvez pas utiliser...

    <ul class="horiz clear">

    ... pour chaque liste, à l'exception de la première?

    • Oui, c'est moche, et je ne suis pas sûr que le code est plus facile à comprendre à l'aide que.
    • Comment exactement est "moche"? CSS est conçu pour avoir plus d'une classe sur des éléments si nécessaire.
    • Ce n'est pas le HTML généré qui est moche, c'est la condition de la vérification qui se passe à l'aide de Django système de template.
    • Eh bien, selon la mise en page, vous pouvez peut-être utiliser "horiz clair" pour toutes les listes, y compris la première - tant qu'il n'y a pas de flottant contenu qui serait normalement le chevauchement des listes. Qui ne devrait pas être mise en vérification.
    • Ah, c'est vrai! Cool, c'est parfaitement logique. Merci!
    • Pas de problème, je serais heureux de vous aider.
    • Ou, vous pouvez appliquer la clearfix règles de la "horizontal" classe si tous les horiz listes doivent être effacées. perishablepress.com/press/2008/02/05/...

    InformationsquelleAutor Amber
  2. 11

    Il y a moyen de le faire en CSS

    http://www.positioniseverything.net/easyclearing.html

     #pages ul li { 
display: block; 
float: left; 
....... 
} 


#pages ul:after { 
contenu: "."; 
display: block; 
hauteur: 0; 
clear: both; 
visibility: hidden; 
}
    • Oui, Si l'OP n'est pas pour IE6 ou 7, que :la suite n'a pas de travail dans ces.
    InformationsquelleAutor ymv
  3. 5

    Si vous voulez chacune des listes de montrer tout ce que est en eux, sans avoir à ajouter une plaque de DIV balise, vous pouvez ajuster la overflow propriété de la liste avec ceci:

    .horiz
{
   overflow:hidden;
}

    Maintenant, même si la liste des articles eux-mêmes sont flotté, le contenu de la liste devrait sans effondrement de la zone qu'ils ont peut-être le faire maintenant parce qu'ils sont décalés de flux.

    InformationsquelleAutor random
  4. 3

    Vous pouvez avoir votre ul avec overflow: hidden;. Ceci établit un nouveau bloc de mise en forme de contexte pour chaque ul qui est exactement ce que vous voulez.

    J'ai utilisé pour clear: both; comme vous, mais une fois que j'ai découvert ce drôle de petit caprice, j'ai commencé à utiliser ce presque exclusivement. Il semble sémantiquement supérieur et fonctionne dans 99% des cas.

    InformationsquelleAutor Steven
  5. 1

    Pourquoi ne pas donner à votre UL et votre LI des largeurs fixes, où la largeur de l'UL est au moins deux fois la largeur de la LI, mais moins de 3 fois la largeur d'un LI.

    Ensuite, vous pouvez mettre tous vos LI dans un UL et de mettre un float: left sur la LI.

    Ce sera la cause de chaque élément de la liste apparaissent les uns à côté des autres, mais ils se terminera sur la ligne suivante quand ils sont à court de chambre (à cause de la largeur de l'UL).

    • L'idée Cool, je suis en fait en utilisant une méthode similaire à celle sur une autre partie de ma page, qui est censé ressembler à un calendrier où chaque flottait élément est "jour".
    InformationsquelleAutor Chris Roberts
  6. 1

    Un autre avis. Vous pouvez utiliser clear:both en "pause" (<br/>)" tag. Pas besoin de code en div. Voir ci-dessous

    Codage en CSS:

    .clear {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

    À l'aide de HTML:

    <br class="clear" />

    Essayer!!!

    • il fonctionne pas pour moi.......:|
    InformationsquelleAutor Logesh Paul
  7. 0

    La solution la plus évidente consiste à déplacer le clear: both à l'élément suivant dans votre mise en page. Si cette ul est suivi par un div, donner div un class="clear", etc.

    InformationsquelleAutor 10goto10
  8. 0

    Mettre au clair sur la ul.

    InformationsquelleAutor Daniel Roseman
  9. 0

    Je suis d'accord avec Logesh Paul,
    Son devenir de plus en plus simples à utiliser br au lieu de div.

    mais je pense que vous devriez mettre l'élément clair à l'extérieur de la boucle.

    InformationsquelleAutor Didats Triadi