Question

我已经在dom中安排了我的块，以便我想要它们在较小的视口上，但我无法弄清楚如何在较大的屏幕上使块5在块3旁边上升。在我的实现中，块不会是固定的高度。

看到我的笔，我希望它能解释我的目标。

HTML

<div class="wrap">
    <div class="block block--right">1</div>
    <div class="block block--left">2</div>
    <div class="block block--left">3</div>
    <div class="block block--left">4</div>
    <div class="block block--right">
        5. Why I dont go to next to block 3 ??
    </div>
</div>

CSS

.wrap {
    overflow: hidden;
    max-width: 400px;
    background-color: gray;
    padding: 20px 20px 0 20px;
}
.block {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
    padding: 20px;
}
.block--left {
    clear: left;
    float: left;
    background-color: blue;
}
.block--right {
    float: right;
    background-color: red;
}

Answer 1

我只需要一个2,3,4的包装器并将其作为一个大块浮动，而不是所有块分开，这里是答案http://codepen.io/pirksts/pen/mPrzPo

See <div class="main-info">

在浮动左侧元素的情况下，浮动右侧不会一直向上移动

1 个答案: