-1 
.box {
    float: left;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px; height: 30px;
}

.box.l { height: 70px; }

左に固定サイズのボックスが浮かんでいます。小さいものは真ん中の半分の高さです。

<div class="box s"></div>
<div class="box s"></div>
<div class="box l"></div>
<div class="box s"></div>
<div class="box s"></div>

コンテナを使用せずに小さなものを互いに配置するにはどうすればよいですか（2つの小さなものを互いに配置し、次に大きなものを右側に、2つの小さなものを再び互いに配置します）？それらのボックスに最適にフィットさせることは可能ですか?

助言がありますか？

4

5 に答える 5

4

私はこれをするのが嫌いですが、どういうわけかうまくいきます..

.box {
    display: block;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

.box.l { height: 70px; float: left; position: relative; left: 110px; top: -80px; }
.box.l + .box.s,
.box.l + .box.s + .box.s { position: relative; top: -80px; left: 110px; }

http://jsfiddle.net/nEMxZ/13/

（実際にはコンテナを使用する必要があります）

于 2013-04-02T13:53:02.490 に答える
1

さて、私は table 要素を使用してこれを行う方法を投稿するつもりです.どちらがきれいかはあなたに任せます.

.box {
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
}

.boxes {
    border-spacing: 10px;
}

<table class="boxes">
    <tr>
        <td class="box"></td>
        <td class="box" rowspan="2"></td>
        <td class="box"></td>
    </tr>
    <tr>
        <td class="box"></td>
        <td class="box"></td>
    </tr>
</table>

これがjsfiddleです： http://jsfiddle.net/nEMxZ/22/

ここでテーブルを使用することにした場合、私はあなたが得ることができるのと同じくらいきれいにこれを持っていると思います. ボックス自体の 2 つの異なるクラスの必要性を軽減しましたが、テーブル用に 1 つ追加したことに注意してください。

于 2013-04-02T14:00:59.267 に答える
0

これは別のアプローチですが、かなり壊れやすく、古いブラウザーをサポートしません。

http://jsfiddle.net/isherwood/nEMxZ/19/

.box {
    float: left;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
}
.box.l {
    height: 70px;
    margin-top: -40px;
}
.box.s:nth-child(2) {
    clear: left;
}
.box.s:nth-child(4) {
    margin-top: -40px;
}

<div class="box s">One</div>
<div class="box s">Two</div>
<div class="box l">Three</div>
<div class="box s">Four</div>
<div class="box s">Five</div>
于 2013-04-02T14:01:24.243 に答える
0

通常、これには要素をグリッドにネストする必要があります。

http://jsfiddle.net/isherwood/nEMxZ/11/

.wrapper {
    float: left;
}
.box {
    float: left;
    clear: left;
    margin: 0 10px 10px 0;
    background-color: #d1d1d1;
    width: 100px;
    height: 30px;
}
.box.l {
    height: 70px;
}


<div class="wrapper">
    <div class="box s"></div>
    <div class="box s"></div>
</div>
<div class="wrapper">
    <div class="box l"></div>
</div>
<div class="wrapper">
    <div class="box s"></div>
    <div class="box s"></div>
</div>
于 2013-04-02T13:48:17.480 に答える
-1

このような？

.box.l {
    float: right;
    clear: both;
}

.box.s { 
    clear: both;
}

あなたのjsFiddleが編集されました

于 2013-04-02T13:44:52.487 に答える