Question

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

.box.l { height: 70px; }

左边是{p> There are fixed-sizes boxes。小的是中间的半高。

<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个小，然后右侧大一个，另一个小两个）？是否有可能在这些盒子上做出最佳配合？

有什么建议吗？

Answer 1

我讨厌这样做，但不知怎的，它有效..

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

（你应该真的使用容器）

Answer 2

好吧，我要用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/

我觉得如果你决定在这里使用一张桌子我就能得到它。注意我已经减轻了对盒子本身的两个不同类的需要，但是为表添加了一个。

Answer 3

通常这需要将元素嵌套在网格中：

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>

Answer 4

这是另一种方法，虽然它相当脆弱，不支持旧浏览器：

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>

Answer 5

喜欢这个吗？

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

.box.s { 
    clear: both;
}

Your jsFiddle edited

CSS盒子定位

5 个答案: