divを改行して面白い振る舞いを引き起こす

次のネストされたdivの長さが隣接するdivよりも長い場合、そのdivは次の行に「適切に」折り返されません。divを改行して面白い振る舞いを引き起こす

div内の各行を分割しないと、div＃1が残りの部分よりも背が高い場合でも、div＃5（下の例では）がdiv＃1になるように強制する方法はありますか？あなたは、divの上clear CSSスタイルを設定するために戻って通常の流れにそれを持参する必要が

<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

出典

2012-04-03 bradley4

それは左フローティング方法だ、奇妙行動ではありませんdivのスタック。それらが上から下へ、しかし右から左に落ちないテトリスブロックであると想像してください。「5 Description」ブロックは、1が大きすぎるため、それ以上左に移動することはできません。 –

説明のためにありがとうpinouchon – bradley4

私は小さな矢を上げてください、それは同じことを意味します:) –

：

<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>

CSS3を使用すると、使用することができます:nth-childこれをより動的に実現するには

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

出典

2012-04-03 22:38:45 Pete

私はここで何かを学びます。 'nth-child（4n）'はかなり巧妙です。 –

Ack、それは最近のブラウザでのみ利用可能な 'nth-child（4n + 1）'でなければなりません。 – Pete

別の解決策は、このようなあなたの要素の高さを強制的に次のようになります（ただし、@Peteソリューションは、よりエレガントである）

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

jsFiddle here

出典

2012-04-03 22:42:26

divを改行して面白い振る舞いを引き起こす

答えて

関連する問題