CSS多个不同高度的浮动左侧元素排列在2列中 [英] CSS multiple different height float left elements arranged in 2 columns

问题描述

这是一个空白的问题：我有多个，float：left元素，我需要排列在2列，并且，他们都有不同的高度。

为了更容易，我需要图片中的元素3，保持填充当然。

我100％使用Plain，我们说Vainilla CSS和AngularJS。我想避免使用任何JS模块，因为元素正在加载和重新加载几乎永久。 最重要的是：100％需要避免Jquery。

重要更新：

不能使用float：left，float：right approch（如果孩子是偶数或奇数）：
将多个固定宽度/可变长度框浮动到2列

重要更新：

在某些情况下，我需要应用两个元素，一个在另一个的底部。所以我正在寻找应用一个属性到元素1。

解决方案

使用css flex布局与列方向。
您可以从CSSTricks阅读非常好的解释： https： //css-tricks.com/snippets/css/a-guide-to-flexbox/

或对列css属性使用砖石方法： / p>

  #container {width：100％; max-width：700px; margin：2em auto;}。cols {-moz-column-count：3; -moz-柱间隙：3％; -moz-柱宽：30％; -webkit-column-count：3; -webkit-column-gap：3％; -webkit-column-width：30％; column-count：3;柱间隙：3％; column-width：30％;}。box {margin-bottom：20px;}。box.one {height：200px; background-color：＃d77575;}。box.two {height：300px; background-color：＃dcbc4c;}。box.three {background-color：＃a3ca3b; height：400px;}。box.four {background-color：＃3daee3; height：500px;}。box.five {background-color：＃bb8ed8; height：600px;}。box.six {background-color：＃baafb1; height：200px;}  

 < div id = class =cols> < div class =box one>< / div> < div class =box two>< / div> < div class =box one>< / div> < div class =box three>< / div> < div class =box two>< / div> < div class =box five>< / div> < div class =box one>< / div> < div class =box two>< / div> < div class =box six>< / div> < div class =box three>< / div> < div class =box two>< / div>< / div>  

b

this is a problem with white spaces: I have multiple, float:left elements, that I need arranged in 2 columns, and, they all have different heights.

To make it easier, I need the element 3 in the picture, to be right after the element 1. Keeping the padding of course.

I'm 100% using Plain, let's say Vainilla CSS, and AngularJS. I would like to avoid to use any JS modules as the elements are being loaded and re-loaded almost permantly. Most important: 100% need to avoid Jquery.

important update:

Cannot use float:left, float:right approch (if child even or odd): Float multiple fixed-width / varible-height boxes into 2 columns

important update:

In some cases I do require to apply 2 elements, only, one at the bottom of the other. So I'm looking to apply a property to the element 1.

解决方案

Use css flex layout with a column direction. You can read a very good explanation from CSSTricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or use a masonry approach with column css property:

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

这篇关于CSS多个不同高度的浮动左侧元素排列在2列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！