Der beste Weg zu „clear: both“ [geschlossen]

StackOverflow https://stackoverflow.com/questions/1237813

  •  11-09-2019
  •  | 
  •  

Frage

Für mehr lange, ich habe eine CSS-Klasse wurde namens clear, die nur die Regel clear: both hat. Ich benutze es in der folgenden Art und Weise (gezeigt in Django-Syntax, aber es ist nicht wichtig): 

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

Wie Sie sehen können, bin ich ein Bündel von horizontalen Listen zu tun, um es wie eine Tabelle aussehen. Stellen Sie sich vor, dass die CSS-Regel .horiz li impliziert float: left. Beachten Sie, dass ich verwende <div class="clear"></div> nach jeder Zeile in dieser „Tabelle“, eine Menge von HTML für etwas so einfach.

Ist das wirklich der Weg zu gehen? Ist das nicht etwas einfacher, dass ich einfach nicht daran gedacht?

War es hilfreich?

Lösung

Gibt es einen Grund, warum Sie nicht verwenden können ... 

<ul class="horiz clear">

... für jede Liste mit Ausnahme der ersten?

Andere Tipps

Es gibt, wie es in CSS zu tun

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

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


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

Wenn Sie jede der Listen wollen zeigen, was in ihnen ist, ohne einen Füllstoff DIV Tag hinzuzufügen, so können Sie die overflow Eigenschaft der Liste mit diesem anpassen: 

.horiz
{
   overflow:hidden;
}
Nun

, auch wenn die Liste-Elemente selbst begeben werden, wird der Inhalt der Liste zeigen soll den Bereich ohne kollabieren, da sie vielleicht jetzt gerade, weil sie aus der Strömung verschoben werden.

Sie können Ihre ul mit overflow: hidden; haben. Dies stellt einen neuen Blockformatierungskontext für jeden ul der genau ist, was Sie wollen.

Ich habe wie Sie clear: both;, aber sobald ich diese seltsame kleine Marotte entdeckt, ich habe mit diesem fast ausschließlich begonnen. Es scheint semantisch überlegen und arbeitet in 99% der Fälle.

Warum Ihr UL und Ihre LI Fixbreiten nicht geben, wobei die Breite des UL ist mindestens die doppelte Breite des LI, aber weniger als 3-fache der Breite eines LI.

Dann können Sie alle Ihre LI in einem UL setzen und einen float: left auf der LI setzen.

Dies wird jedes Listenelement dazu führen, nebeneinander zu erscheinen, aber sie werden auf die folgende Zeile umbrochen, wenn sie aus dem Zimmer laufen (aufgrund der Breite des UL).

Eine weitere Beratung. Sie können klar verwenden: sowohl in "break (<br/>)" Tag. Keine Notwendigkeit, in div zu codieren. Siehe unten

Coding in CSS: 

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

Verwendung ist HTML:

<br class="clear" />

Versuchen !!!

Die naheliegendste Lösung ist die clear: both auf das nächste Element in Ihrem Layout zu bewegen. Wenn dieser ul von einem div gefolgt wird, geben, dass div ein class="clear", etc.

Setzen Sie

die klar auf der ul.

Ich bin einverstanden mit Logesh Paul, Sein worden einfacher br statt div zu verwenden.

, aber ich denke, Sie das klare Element außerhalb des Looping setzen sollte.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top