javascript - 根据其他元素调整高度

Question

我的情况是这样的:

基本上是一个部分，在该部分下，我有 3 个列/面板。根据存储在任何这些列中的数据，它有时看起来有点空。当下面有 3 列 + 3 列(当前显示为 2)时，它也会变得复杂，因为如果发生这种情况并且第 3 列上没有数据，所有内容都会向上移动到第 1 行。我试图设置静态高度并且它有效但同时当你按下 + 符号时它会扩展......并且停止工作。

有没有办法根据最长的元素调整高度？

css相关部分:

        div.defaultSection {
            border: 1px solid #bbbbbb;
            padding-bottom: 0px;
            /* display: inline-block; */
            margin: 5px;
            width: calc(100% - 10px);
            overflow: hidden;
            /* NEW */
            overflow-x: hidden;
            overflow-y: hidden;
            box-sizing: border-box;
            float: left;
        }
        div.defaultColumn {
            box-sizing: border-box;
            float: left;
            overflow: hidden;
            /* NEW */
            overflow-x: hidden;
            overflow-y: hidden;
            padding: 2px;
        }
        .defaultCard {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            width: 40%;
            border-radius: 5px;
            margin: 5px;
        }

该页面的完整代码在这里:https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example14-Other/Example14.html

Answer 1

最简单的方法是使用 Flexbox 而不是 float ...行中的内容将始终与最高的元素高度相同，并且不会换行，除非您指定它应该。

CSS Tricks 有很好的flexbox overview .

但这里有一个让您入门的示例:

.container {
  display:flex;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #ddd;
}

.content {
  flex-basis: 25%;
  background-color: #5C8ADE;
  padding: 10px;
  font-size: 10px;
  line-height: 1.6;
  font-family: Helvetica, Arial, Sans-Serif;
  color: #fff;
}

<div class="container">
  <div class="content">Short Content</div>
  <div class="content"></div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum egestas nisi quis consequat. Aenean sit amet ligula massa. Morbi ut aliquet mauris. Nullam eget ipsum et magna luctus rhoncus. Curabitur aliquet erat non erat iaculis, vitae aliquet mi malesuada. Mauris tempus enim sed ligula molestie, nec efficitur dui volutpat. Maecenas euismod sed nisl sed ultricies. Duis gravida sem ac tellus consectetur blandit. Sed nec metus non augue facilisis malesuada in quis orci. Suspendisse blandit, augue at ullamcorper pulvinar, massa elit lacinia odio, tempus accumsan libero ex eu leo.</div>
</div>