1

以下のネストされたdivs のいずれかが隣接する s よりも長い場合div、divs は「適切に」次の行に折り返されません。

各行を独自の div に分割せずに、残りの部分よりも背が高い #1場合でも、 div #5 (以下の例) を強制的に div の下に配置する方法はありますか?div #1

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

説明が偶数の例:
説明が偶数の例

不均一な説明の例:
凸凹のある例 説明

4

2 に答える 2

1

clear通常のフローに戻すには、div に CSS スタイルを設定する必要があります。

<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-03T22:38:45.370 に答える
1

別の解決策は、次のように要素の高さを強制することです:(ただし、@Pete ソリューションはよりエレガントです)

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

ここでjsFiddle

于 2012-04-03T22:42:26.433 に答える