1

タイトルだけでは分かりにくいと思いますので、実例で解説します。

  1. サーバーはコンテンツを含む DIV を生成し、ブラウザーに送信します。
  2. 各 DIV には同じクラスがあります。' .column'.
  3. すべての DIV の高さは「ほぼ」同じです。一方が他方よりもわずかに高くても低くてもかまいません。

目標は、上の最初の列がその兄弟よりも高い場合でも、FLOAT:leftすべての列を強制することです。以下のスクリーンショットを参照してください。

スクリーンショット

上の画像では、Col1 の高さが兄弟の高さよりも高いため、 Col4がCol1の下にないことがわかります。Col1 DIV の下に Col4 DIV を強制的にフロートさせる方法はありますか?

可能であれば、ネイティブ CSS ソリューションを探しています。また、3 つの列を作成して DIV をそれぞれにプッシュするような単純なソリューションは必要ありません。

それが本当に不可能な場合は、 Col6がCol1に「固執」していない理由を答えていただければ幸いです。

上記は以下から入手できます。

.col{
  float:left;
  height:50px;
  width:130px;
  border-left: 1px solid;
  border-bottom: 1px solid;
}

.col1{
  height:60px
}

そしてHTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="col col1">Col1</div>
  <div class="col">Col2</div>
  <div class="col">Col3</div>
  <div class="col">Col4</div>
  <div class="col">Col5</div>
  <div class="col">Col6</div>
</body>
</html>

jsbin の実際の例を次に示します。

助けていただければ幸いです。

4

2 に答える 2

4

単純にフロートをクリアできるはずです:

.col:nth-child(4) {
  clear: left;
}

古いブラウザーをサポートする必要がある場合は、代わりに次のセレクターを使用してください。

.col1 + .col + .col + .col {
  clear: left;
}

ただし、5 番目と 6 番目の列をそれぞれ 2 番目と 3 番目の列の下端と同じ高さにする必要がある場合は、フロートだけでは実現できません。別の方法を見つけるか、jQuery Masonryなどを使用してページをレイアウトする必要があります。

6 番目の列が 1 番目の列にくっついていない唯一の考えられる理由は、新しい行に折り返されているためです。フロート モデルによれば、ボックスは前のフロート ボックスの底より高くすることはできません。

于 2012-10-05T04:37:21.793 に答える
1

css の " col " クラスから" float:left; "を削除して、" display:inline-block; "に置き換えるだけでうまくいくかもしれません。すべてのブラウザで動作するかどうかはわかりません。クロムとモジラでのみこれを試しました。

 .col{
     /*float:left;*/
     height:50px;
     width:130px;
     border-left: 1px solid;
     border-bottom: 1px solid;

     display:inline-block; 
  }

http://jsbin.com/ajikoq/11/editの実際の例

于 2012-10-05T04:51:25.913 に答える