在父div的左侧堆叠具有不同高度的div

Question

我的div结构中有不同高度的div。每个div包含<p>个标记和<h2>标记。这些是使用从服务器端检索的数据绘制的。我想将它们堆叠在屏幕左侧。以下示例显示了它现在的显示方式。

我想要的是将左对齐的所有div定位为与其高度和宽度无关。左对齐堆栈的排序。

以下是上图的div结构。

<div class="specials-container">
<div class="clear"></div>
<article class="facility-group">
    <h2>Accomodation</h2>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>2 Luxurious Rooms With Attached Toilets</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Armchair &amp; built in window seat.</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>55 metres sq.</p>
    </div>
    <div class="clear"></div>
</article>
<article class="facility-group">
    <h2>Health</h2>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Double Vanity, Illuminated Makeup/Shaving Mirror</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Air Conditioned</p>
    </div>
    <div class="clear"></div>
</article>
<article class="facility-group">
    <h2>Connectivity</h2>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>High Speed Internet Access</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>LCD Screen Television With Cable Channels</p>
    </div>
    <div class="clear"></div>
</article>
<article class="facility-group">
    <h2>Special</h2>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>King Size Balinese Four Poster Double Bed or Large</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Family Suite consists of a Double Garden Suite.</p>
    </div>
    <div class="clear"></div>
</article>
<article class="facility-group">
    <h2>Common</h2>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Shared Bathroom</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Complimentary Toiletries</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Express Check In</p>
    </div>
    <div class="facility-box">
        <img src="/clientImages/TheWallawwa/facility-tick.png">
        <p>Free News Paper</p>
    </div>
    <div class="clear"></div>
</article>
<div class="clear"></div>
</div>

这是我申请的CSS。我只添加了父CSS和容器CSS。省略了图像和标题CSS。如果需要，我也会发布它们。

.specials-container {
    width: 100%;
    position: relative;
}

article {
    padding: 10px 6px;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 5px;
    float: left;
    position: relative;
    margin: 10px;
}

我厌倦了display:flex和其他显示命令。但IE 7等旧版IE不支持这些版本。

这是我想要堆叠DIV的方式。

Answer 1

我使用clear命令找到了解决此问题的方法。如果我对我绘制的每个第四个元素使用clear-fix，则元素会堆叠到左边。

在这种情况下，我要为我绘制的每个第四个元素添加clear:left。