如何使浮动divs每行的最高元素的高度 [英] How to make floating divs the height of the tallest element for each row

问题描述

我有一堆如图所示的表块.

I have a bunch of blocks of tables shown in picture.

该块具有以下css

.block {
    float: left;
    width: 50%;
}

它们都包裹在包装纸中

<div class="wrapper">
    <div ng-show="condition1" class="block"></div>
    <div ng-show="condition2" class="block"></div>
    <div ng-show="condition3" class="block"></div>
</div>

1. 每个块的高度是动态的，具体取决于内容.
2. 根据条件，每个块可以显示还是不显示.如您所见，第二个区块可能不会显示，而第三个区块将被向上推以与第一个区块对齐.
3. 每个行"始终最多有2个块
4. 将来会有更多这样的区块.

现在，我要实现的是针对每一行，将高度较小的块设置为与高度较大的块相同的高度.我不确定如何使用CSS来解决这个问题.如果不可能的话，使用jquery来解决这个问题的最佳方法是什么?

Now, what i want to achieve is for each row, set the the block with the smaller height to be the same height as the block with greater height. I am not sure how to approach this using CSS. If it is not possible, what would be the best way to approach this using jquery?

我花了无数个小时，无法弄清楚(至少使用CSS).以上所有陈述均为要求，不能更改.任何专家的帮助将不胜感激.

I spent countless hours and could not figure out (at least using CSS). All of the statements above are requirements and cannot be changed. Any expert help would be appreciated.

推荐答案

您可能想看看flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You may want to look at flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox可用于根据父级的尺寸拉伸子级元素.

Flexbox can be used to stretch child elements based on the parent's size.

这是我在jsfiddle中进行的快速测试

Here's a quick test I did in jsfiddle

https://jsfiddle.net/7Lknyxqr/

.wrapper{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
}

.block{
  width: calc(50% - 20px);
  background-color: #343;
  margin: 10px;
}

这篇关于如何使浮动divs每行的最高元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！