CSS-Block float left

Habe ich diese html-Datei

    <div class="con" style="width:100px;height:200px;">
        1
    </div>
    <div class="con" style="width:100px;height:200px;">
        2
    </div>
    <div class="con" style="width:100px;height:400px;">
        3
    </div>
    <div class="con" style="width:100px;height:400px;">
        4
    </div>
    <div class="con" style="width:100px;height:100px;">
        5
    </div>
    <div class="con" style="width:100px;height:100px;">
        6
    </div>
    <div class="con" style="width:100px;height:100px;">
        7
    </div>
    <div class="con" style="width:100px;height:100px;">
        8
    </div>

Und ich will mit diesem html-haben zu diesem Ergebnis :
CSS-Block float left

Aber ich Schreibe das css :

<style>
body {
width:440px;
height:440px;
}
.con{
float:left;
background:#bebebe;
margin:1px;
}
</style>

Und ich bekam dieses Ergebnis! 🙁
CSS-Block float left

Ich wiederhole, dass ich das Ergebnis das erste Bild mit nur der html-code, den ich geschrieben habe.

  • Sie sind mit dem CSS-Regeln falsch. Id sollte eindeutig sein, um ein div, sollten Sie eine Klasse verwenden, wenn Sie möchten, verschiedene div-Elemente haben den gleichen Stil.
  • Ich weiß, aber jetzt ist es nicht wichtig!!!!!!
  • Nein, es ist immer wichtig.
  • Hahaha du hast Recht, aber jetzt würde ich gerne in der Lage sein dieses problem zu lösen, die nur mit dem linken Schwimmer. Warum ich Schreibe, eine bestimmte Sache, die muss nur float left.
  • ja, es ist wichtig; Ihr code ungültig ist, die bewirkt, dass Sie Probleme schließlich auch, wenn es jetzt funktioniert. Und dein problem viel einfacher zu lösen, wenn Sie die Verwendung von Klassen richtig anstelle von ids.
  • Anstatt so arrogant, mit Klassen, die Sie kennen würde es mein problem lösen.

InformationsquelleAutor zizzamia | 2011-02-03
  1. 2

    ändern Sie die width des body zu 408px; dann float:right; die div 3 & 4.

    demo: http://jsbin.com/imire5

    Aktualisierte demo mit float left nur: http://jsbin.com/imire5/2

    • Sorry, aber wenn ich wollte nur "float: left".
    • Dann nehme ich an Sie haben, wickeln Sie jede Seite (Links und rechts). Div mit der Anzahl 1,2,5,6,7,8 in der linken Hülle, und die Nummern 3 und 4 in der richtigen Hülle. Überprüfen Sie die aktualisierten link
    • Sehr vielen Dank, aber die Struktur, die ich bin den Umgang mit sich ständig ändert, und die Anordnung der Blöcke zufällig sind, so brauche ich nur die Links, weil dann jedes mal, wenn Sie sich selbst statt.
    • Ich erstellt eine javascript-engine, die es mir erlaubt mehrere Blöcke mit unterschiedlicher Größe. Also in der Reihenfolge des Auftretens will ich Stelle die verschiedenen div-richtig. Die Struktur des blocks weiß ich nicht, denn es ist immer Zufall, weshalb ich nur mit CSS positionieren Sie es richtig.
    InformationsquelleAutor Sotiris
  2. 2

    Erstens, Sie sollten nicht mehrere Elemente mit der gleichen id. Dies ist, was class ist für. id sollte innerhalb der Seite eindeutig sein.

    Die Lösung zu deinem problem ist, schweben die zwei hohen Blöcken die right und alles andere zu den left.

    Dies wird natürlich nur funktionieren, wenn die Boxen in einen container (also der Körper) das ist genau die richtige Breite für alle vier, sonst werden Sie nur am Ende mit einem Loch in der Mitte Ihres Layouts.

    Das Problem ist, dass, da haben Sie die gleiche ID für alles, man kann nicht einfach festlegen, welche float right und welche float left.

    Gibt es Möglichkeiten, es zu tun, aber die richtige Lösung wäre die Verwendung von Klassen.

    <div class="con" style="width:100px;height:200px;">
    1
</div>
<div class="con" style="width:100px;height:200px;">
    2
</div>
<div class="con tall" style="width:100px;height:400px;">
    3
</div>
<div class="con tall" style="width:100px;height:400px;">
    4
</div>
<div class="con" style="width:100px;height:100px;">
    5
</div>
<div class="con" style="width:100px;height:100px;">
    6
</div>
<div class="con" style="width:100px;height:100px;">
    7
</div>
<div class="con" style="width:100px;height:100px;">
    8
</div>


<style>
body {
  width:408px;
  height:440px;
}
.con {
  float:left;
  background:#bebebe;
  margin:1px;
}
.tall {
  float:right;
}

</style>

    Wenn Sie absolut nicht (oder wird nicht) ändern Sie den HTML-code, es gibt noch eine andere Lösung, die ich vorschlagen kann - die CSS - [attr] selector können Sie angeben, eine andere CSS-Stile für Elemente mit bestimmten Attributen. In diesem Fall könnten Sie es verwenden, um wählen Sie aus der hohen Blöcke und schweben Sie Recht.

    #con[style~='height:400px;'] {float:right;}

    Dies betrifft nur die Elemente, die id="con" und wo die style Attribut enthält height:400px;.

    Bitte beachten Sie jedoch, dass die [attr] selector funktioniert nicht auf älteren version von Internet Explorer verwenden, so müssen Sie möglicherweise excersise Vorsicht wenn Sie sich entscheiden, es zu benutzen.

    Diese Lösung beinhaltet auch die schwimmenden bestimmte Elemente auf der rechten Seite, die Sie scheinen tot zu sein vor, aber es ist immer noch die einzige praktikable CSS-only Lösung.

    • Ok Und wenn ich das nutzen wollte und nur "float: left" gibt es einen trick um es richtig zu machen?
    • Ich habe aktualisiert die Antwort mit mehr Details und enthalten funktionierenden code.
    • Ich habe eine andere Möglichkeit, es zu tun mit CSS, die nicht die änderung, die Sie HTML-Code auf alle. Es würde noch Notwendigkeit, Sie zu float:right dem hohen block wenn.
    InformationsquelleAutor Spudley
  3. 0

    Das grundlegende Problem, das Sie haben, ist, dass CSS - float arbeitet in einer Weise, die anders ist, wie Sie es wollen zu arbeiten.

    Anderen Antwort zu deinem problem könnte sein, Javascript zu verwenden, um es zu hacken.

    Es ist ein jQuery-plug-in namens Mauerwerk, die aussieht wie es das tut, was Sie suchen. Sie können float:left; für alles, und verwenden Sie dann Mauerwerk zu schließen die Lücken.

    Es würde bedeuten, sich auf eine Lösung, die nicht vollständig CSS-basiert, obwohl, die ist wahrscheinlich nicht ideal - vor allem, da ich schon eine funktionierende CSS-Lösung.

    (auch wenn Sie beginnen mit Javascript, Sie definitiv reparieren müssen Sie Ihre id vs class problem-Javascript verleugnen Sie, wenn Sie alle diese Elemente mit den gleichen id)

    • So, ich habe eine javascript-engine, die es mir erlaubt mehrere Blöcke mit unterschiedlicher Größe. Also in der Reihenfolge des Auftretens will ich Stelle die verschiedenen div-richtig. Die Struktur des blocks weiß ich nicht, denn es ist immer Zufall, weshalb ich nur mit CSS positionieren Sie es richtig.
    • Hat man sich bei dem Mauerwerk Seite, die ich verlinkt? Es effektiv simuliert eine float:downwards; Art von layout. Soweit ich sagen kann, es ist so nah wie Sie gehen, um zu Ihrem vorgesehenen layout ohne Verwendung float:right; auf den hohen blocks wie pro die anderen Antworten.
    InformationsquelleAutor Spudley
Schreibe einen Kommentar