html - CSS フロートの空白

Question

ラップに複数の div があり、高さが異なります。左に浮かびたいです。2 つの Div を連続して配置できます。しかし、各 div の高さが異なるため、次の行にはかなり奇妙なスペースが残っています。スペースを削除して div を上に移動できますか?

画像を見てください：

コードは次のとおりです。

<div class="wrap">
    <div class="box1">Box1 with less height.</div>
    <div class="box2">Box2 with more height.</div>
    <div class="box3">Box3 with whatever height.</div>
</div>

CSS:

.wrap{
    width:410px;
    border:1px solid red;
    overflow:hidden;
}

.box1{
    width:200px;
    height:50px;
    float:left;
    border:1px solid green;
}

.box2{
    width:200px;
    height:150px;
    float:left;
    border:1px solid blue;
}

.box3{
    width:200px;
    height:250px;
    float:left;
    border:1px solid blue;
}

JSFiddle: http://jsfiddle.net/NsH5M/

PS。div の高さは固定されていません。これはほんの一例です。 編集: 申し訳ありませんが、マークアップを編集することはできません。

ここに画像の説明を入力

score 7 · Accepted Answer

石積みを使用してみてください。これは、空のスペースなしで div を配置するのに役立ちます。

それがコードの例として使用される方法です：jsfiddle（2018年11月更新）

HTML:

<div class="wrap">
    <div class="box box1">Box1 with less height.</div>
    <div class="box box2">Box2 with more height.</div>
    <div class="box box3">Box3 with whatever height.</div>
</div>

JavaScript:

$(function(){
  $('.wrap').masonry({
      // options
    itemSelector : '.box'
  });
});

そしてCSS：

.wrap{
    width:410px;
    border:1px solid red;
    overflow:hidden;

}

.box{
    float: left;
    width: 200px;
}

.box1{
    height:50px;
    border:1px solid green;
}

.box2{
    height:150px;
    border:1px solid blue;
}

.box3{
    height:250px;
    border:1px solid blue;
}

score 3 · Accepted Answer

右側に配置したい要素に float:right を使用するだけです。この場合：

.box2{
width:200px;
height:150px;
float:right;
border:1px solid blue;
}

あなたのjsfiddleはここで更新されました

score 2 · Accepted Answer

次のようfloat:rightに.box2書き込みます。

.box2{
    width:200px;
    height:150px;
    float:right;
    border:1px solid blue;
}

これをチェックしてくださいhttp://jsfiddle.net/NsH5M/2/

score 1 · Accepted Answer

うまくいくかどうかはわかりませんが、ボックス 1 とボックス 3 を左に、ボックス 2 を右にフローティングしてみてください。

編集: Firefox で動作しますhttp://jsfiddle.net/NsH5M/1/

score 1 · Accepted Answer

マークアップを編集できる場合は、box1 と box3 をフローティングコンテナにラップできます。

http://jsfiddle.net/NsH5M/3/

フロートすることもできます: box3 を右に配置しますが、結果がわずかに変わります (左にフロートされたボックスと右にフロートされたボックスの間にギャップが生じます。これは、デザインによっては問題にならない場合があります。

score 0 · Accepted Answer

0

Isotopeは、石積みのレイアウトを使用して、これを行うことができます。

于 2012-06-21T11:01:23.653 に答える

html - CSS フロートの空白

7 に答える 7

Related

Reference