我有一堆表格 block ,如图所示。
该 block 具有以下 css
.block {
float: left;
width: 50%;
}
而且它们都包裹在 wrapper 中
<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>
- 每个 block 的高度都是动态的,具体取决于内容。
- 每个 block 可以根据条件显示或不显示。如您所见,有可能第二个 block 不会显示,第三个 block 将被上推以与第一个 block 对齐。
- 每“行”始终最多有 2 个 block
- 将来会有更多这样的区 block 。
现在,我想要实现的是对于每一行,将高度较小的 block 设置为与高度较大的 block 相同的高度。我不确定如何使用 CSS 来解决这个问题。如果不可能,使用 jquery 处理此问题的最佳方法是什么?
我花了无数个小时也想不通(至少使用 CSS 是这样)。以上所有陈述均为要求,不可更改。任何专家的帮助将不胜感激。
最佳答案
你可能想看看 flexbox。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox 可用于根据父元素的大小拉伸(stretch)子元素。
这是我在 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;
}
关于javascript - 如何使 float div成为每行最高元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42148167/