CSS盒子定位

-1

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

.box.l { height: 70px; }

There are fixed-sizes boxes向左飄浮。小一半是中間一半的高度。CSS盒子定位

<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彼此小小的再次）？這些盒子可以做出最佳配合嗎？

有什麼建議嗎？

來源

2013-04-02 Andrew Rumm

是什麼小彼此的意思嗎？ – VoidKing

對不起，我英文很差。一個在上面。其他的一個小盒子。 –

噢好吧，沒問題，謝謝，只是不明白 – VoidKing

-1

是否這樣？

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

.box.s { 
    clear: both; 
}

Your jsFiddle edited

來源

2013-04-02 13:44:52

不可以。現在箱子被鋪開了。 :) –

沒有冒犯，塞德里克，但你在發佈之前在jsfiddle中看過嗎？ – VoidKing

好吧，我誤解了他的描述... –

通常，這需要在網格中嵌套的元素：

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-02 13:48:17 isherwood

對不起，這是obvoius。但我的問題的關鍵 - 它解決沒有任何包裝？ –

我恨自己這樣做，但不知何故，它的工作原理..

.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-02 13:53:02 Kaloyan

不錯。與我的第二個答案類似，但可能更符合舊版瀏覽器。 – isherwood

好吧，我只是要交了如何使用表元素來做到這一點，我就讓你決定哪個更乾淨。

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

我想我已經得到了這個約乾淨，你可以得到它，如果你決定在這裏使用一個表。注意我已經減輕了兩個箱子本身的需要，但爲表格添加了一個。

來源

2013-04-02 14:00:59 VoidKing

請記住'cellspacing'不再是HTML 5中的有效屬性，所以使用'table {border-spacing：10px; }' – Floremin

@Floremin謝謝你，說實話我很害怕這個。我會編輯我的答案。謝謝！ – VoidKing

這裏的另一種方法，雖然它是相當脆弱的，不支持舊的瀏覽器：

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-02 14:01:24 isherwood

回答

相關問題