2

より大きな固定幅の 2 列ブロック内に、a、b、c、d という名前のブロックがあります。

レイアウト

dをcにしてa以下にしたいのですが、純粋なCSSで完成させることは可能でしょうか？

私が試したこと、

CSS:

.wrapper {
    border: 1px dotted #111;
    width: 360px;
    padding: 20px;
    float: left;
}

.rectangle {
    display: inline-block;
    float: left;
    border: 1px solid #333;
    min-height: 100px;
    width: 178px;
}

#a {
    height: 248px;
}

#b {
    height: 148px;
}

#c {
    height: 198px;
}

#d {
    height: 98px;
}

HTML:

<div class="wrapper">
<div id="a" class="rectangle">a</div>
<div id="b" class="rectangle">b</div>
<div id="c" class="rectangle">c</div>
<div id="d" class="rectangle">d</div>
</div>​

http://jsfiddle.net/imom0/E7GYR/1/

シンプルにするために、私は JavaScript やmasonryを使用しないことを好みます。

4

2 に答える 2

3

正しい div を右にフロートさせてみてください: http://jsfiddle.net/E7GYR/7/

HTML:

<div class="wrapper">
<div id="a" class="rectangle left">a</div>
<div id="b" class="rectangle right">b</div>
<div id="c" class="rectangle right">c</div>
<div id="d" class="rectangle left">d</div>
</div>​

CSS:

.wrapper {
    border: 1px dotted #111;
    width: 360px;
    padding: 20px;
    float: left;
}

.rectangle {
    display: inline-block;
    border: 1px solid #333;
    min-height: 100px;
    width: 178px;
}

.left
{
    float:left;       
}

.right
{
    float:right
}

#a {
    height: 248px;
}

#b {
    height: 148px;
}

#c {
    height: 198px;
}

#d {
    height: 98px;
}
​
于 2012-12-14T15:59:51.660 に答える
2

column-count次のように CSS プロパティを使用できます。

.wrapper {
    border: 1px dotted #111;
    width: 460px;
    padding: 20px;
    float: left;
    column-count:2;
}

.rectangle {
    display: inline-block;
    border: 1px solid #333;
    min-height: 100px;
    width: 170px; 
}

HTML を次のように再構築します。

<div class="wrapper">
<div id="a" class="rectangle">a</div>
<div id="d" class="rectangle">d</div>
<div id="b" class="rectangle">b</div>
<div id="c" class="rectangle">c</div>
</div>

column-countほとんどのブラウザでは、それぞれのベンダー プレフィックスでサポートされています。詳細については、 caniuseを参照してください。

フィドルの例はここにあります。

于 2012-12-14T16:05:24.630 に答える