避免浮动左边的空格

Question

我想知道如何使用float: left来避免大空白，所有块都没有相同的height

here's a demo

<div class="container">
    <div class="block">
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, molestias vel quia ratione a nostrum quae provident facere perspiciatis commodi!</div>
    </div>
    <div class="block">
        <div class="content">Est, eaque, enim? Illo, incidunt, molestias aut expedita aspernatur consectetur quos sit accusantium hic mollitia beatae numquam itaque excepturi eaque.</div>
    </div>
    <div class="block">
        <div class="content">Nihil, quibusdam animi voluptatum modi pariatur aliquam adipisci nostrum placeat eos atque maxime odit optio molestias nisi dignissimos. Cum, vel?</div>
    </div>
    <div class="block">
        <div class="content">Tempore, adipisci voluptatibus iure temporibus aut hic deleniti inventore accusantium excepturi vel et omnis veritatis itaque nesciunt odit ut nemo?</div>
    </div>
    <div class="block">
        <div class="content">Voluptas, dignissimos, reiciendis, rem quasi neque quia molestiae in consequatur animi at et qui sint nihil ipsum corrupti totam repudiandae?</div>
    </div>
    <div class="block">
        <div class="content">Tempora, velit, incidunt a est sed nostrum optio suscipit in sint eveniet architecto pariatur culpa asperiores minus praesentium perspiciatis dignissimos.</div>
    </div>
    <div class="block" style="height:200px"><!-- this height is for example, the height can be higher or lower -->
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, enim, quidem laudantium quo iusto deleniti sed assumenda placeat dolorem est?</div>
    </div>
    <div class="block">
        <div class="content">Earum, ut, laudantium, eaque, quaerat architecto officiis magni iusto eum nesciunt asperiores illum sit. Et officiis modi tempore mollitia sunt.</div>
    </div>
    <div class="block">
        <div class="content">Nobis, placeat, tenetur tempore facere reiciendis illo reprehenderit sunt a ratione hic deleniti quaerat fuga ex minus eum culpa laborum.</div>
    </div>
    <div class="block">
        <div class="content">Qui, nostrum, ab, totam, molestias quaerat expedita saepe odit accusamus reiciendis rerum officia provident iusto voluptate quis quos sit nisi.</div>
    </div>
    <div class="block">
        <div class="content">Eum, dolorem, qui, autem dolorum et molestiae asperiores rerum eius minus iste quaerat labore distinctio vel cum quis atque consequatur.</div>
    </div>
    <div class="block">
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure est magni necessitatibus consequatur deleniti aut veniam repellat quis similique ab.</div>
    </div>
    <div class="clear"></div>
</div>

的style.css

body {color:white;}
.clear{clear: both;}
.block {float:left;width: 50%;height:100px;}
.content {margin: 10px; padding: 10px; background-color: #000;}

Answer 1

使用常规css，你无法真正避免每个元素下面的空白。

使用css执行此操作的唯一方法是将所有内容排列在列中，而不是实际浮动的所有内容。

大多数人通过使用http://masonry.desandro.com/这样的插件来解决这个问题，该插件使用jQuery / JavaScript来使其工作。

希望有所帮助。