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而不是浮点数...行中的内容将始终与最高项目的高度相同，并且除非您指定了该高度，否则不会自动换行。

CSS技巧非常好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>

Answer 2

我不确定这是否是您所需要的，但请将其添加到您的html代码中：

<script type="text/javascript">
        $(document).ready(function () {
        var highest = $(".defaultCard").offset().top + $(".defaultCard").height();
        $(".defaultColumn").height(highest); // or if didn't work
        document.getElementByClassName("defaultColumn").style.height = highest; // then try this
        // make sure only use one of two lines above
</script>

根据其他元素调整高度

2 个答案: