Wrapping div in neue Zeile verursacht witziges Verhalten

Wenn einer der darunter geschachtelten divs eine Länge haben, die länger ist als ein angrenzender div, werden die divs nicht in die nächste Zeile "richtig" umgebrochen.Wrapping div in neue Zeile verursacht witziges Verhalten

Ohne jede Zeile in ihrem eigenen div zu teilen, gibt es eine Möglichkeit, div # 5 (im Beispiel unten) zu zwingen, unter div # 1 zu fallen, selbst wenn div # 1 größer ist als der Rest?

<style type="text/css"> 
    .video-item { 
     margin: 10px 29px 20px 0px; 
     width: 208px; 
     float: left; 
     overflow: hidden; 
} 
</style> 

<div style="width: 948px;"> 
    <div class="video-item">1<br>This is what happens when Description is too long...   </div> 
    <div class="video-item">2<br>Description</div> 
    <div class="video-item">3<br>Description</div> 
    <div class="video-item">4<br>Description</div> 
    <div class="video-item">5<br>Description</div> 
    <div class="video-item">6<br>Description</div> 
    <div class="video-item">7<br>Description</div> 
    <div class="video-item">8<br>Description</div> 
    <div class="video-item">9<br>Description</div> 
    <div class="video-item">10<br>Description</div> 
</div>

Example with even Description

Example with uneven Description

Quelle

2012-04-03 bradley4

Es ist nicht ein sonderbares Verhalten, es ist die Art und Weise schwimmend links ist divs Stapel. Stellen Sie sich vor, dass Tetris-Blöcke nicht von oben nach unten fallen, sondern von rechts nach links. Der Block '5 Beschreibung' kann nicht weiter nach links verschoben werden, weil 1 zu groß ist. –

Danke für die Erklärung pinouchon – bradley4

Gib mir einen kleinen Pfeil nach oben, es bedeutet das gleiche :) –

Sie benötigen die clear CSS-Stil auf dem div zu setzen, um es wieder in den normalen Fluss:

<style type="text/css"> 
    .video-item { 
     margin: 10px 29px 20px 0px; 
     width: 208px; 
     float: left; 
     overflow: hidden; 
    } 
    .clear { 
     clear: left; 
    } 
</style> 

<div style="width: 948px;"> 
    <div class="video-item">1<br>This is what happens when Description is too long...   </div> 
    <div class="video-item">2<br>Description</div> 
    <div class="video-item">3<br>Description</div> 
    <div class="video-item">4<br>Description</div> 
    <div class="video-item clear">5<br>Description</div> 
    <div class="video-item">6<br>Description</div> 
    <div class="video-item">7<br>Description</div> 
    <div class="video-item">8<br>Description</div> 
    <div class="video-item clear">9<br>Description</div> 
    <div class="video-item">10<br>Description</div> 
</div>

Mit CSS3, könnten Sie :nth-child, um dies dynamischer zu erreichen:

.video-item:nth-child(4n+1) { 
    clear: left; 
}

Quelle

2012-04-03 22:38:45 Pete

Ich lerne hier etwas. 'nth-child (4n)' ist ziemlich clever –

Ack, sollte es 'nth-child (4n + 1)' sein - nur in modernen Browsern verfügbar, also ist die erste Lösung diejenige, die verwendet werden sollte. – Pete

Eine andere Lösung wäre, die Höhe Ihrer Elemente so zu zwingen: (aber @Pete Lösung ist eleganter)

.video-item { 
    margin: 10px 29px 20px 0px; 
    width: 208px; 
    float: left; 
    overflow: hidden; 
    height: 70px; 
}

jsFiddle here

Quelle

2012-04-03 22:42:26

Wrapping div in neue Zeile verursacht witziges Verhalten

Antwort

Verwandte Themen