根据兄弟姐妹的高度调整元素的高度[重复]

Question

根据屏幕尺寸，我有几个小部件。这是我的布局：

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some very long description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>

样式如下：

.widget {
  width: 100%;
  margin: 10px;
  padding: 10px;
  background-color: white;
  //height: auto;
  height: 80px;
  border: 1px silver solid;
  font-size: 18px;
}

.name {
  font-weight: bold;
  height: 40px;
  color: #082654;
}

.description {
  color: #4AB6E1;
}

这里是jsfiddle

问题是我希望它们具有一定的高度：例如 80 像素，因为它的大小在几乎所有情况下看起来都不错，但很少我在小部件描述中有一些较长的内容，然后它就会开箱即用。所以在这种情况下，我希望它的高度适应内容大小，所有其他小部件也适应它的高度。当我将小部件高度设置为自动时 - 只有单个小部件在高度上拉伸并且它们看起来不均匀。任何想法如何更改样式以实现我的需要？

Answer 1

你可以尝试使用 diplay:table

.widget {
  width: 100%;
  margin: 10px;
  padding: 10px;
  background-color: white;
  //height: auto;
  height: 80px;
  display:table;
  border: 1px silver solid;
  font-size: 18px;
}

.name {
  font-weight: bold;
  height: 40px;
  color: #082654;
}

.description {
  color: #4AB6E1;
}

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some very long description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>

Answer 2

我可以使用 jQuery 看看这个 JSFiddle

https://jsfiddle.net/cnoof9hb/

使用以下设置高度：-

var maxheight = 0;

$('div div.widget').each(function () {
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
});

$('div div.widget').height(maxheight);

Answer 3

使用float:left 浮动元素，使父元素取其子元素高度的累积高度。还要在父元素中使用height:auto;，因为高度是不可预测的。

.widget {
      width: 100%;
      margin: 10px;
      padding: 10px;
      background-color: white;
      /*height: auto;*/ /* removed this */
      border: 1px silver solid;
      font-size: 18px;
  
      /* Added these 2 lines */
      float:left;
      height: auto;
    }

    .name {
      font-weight: bold;
      height: 40px;
      color: #082654;
    }

    .description {
      color: #4AB6E1;
    }

Answer 4

试试下面的代码，它会“根据兄弟姐妹的高度调整元素的高度”，但您可能需要稍微更改一下以满足您的需求

<div class="t-row">

    <div class="col">Some description goes here Some description goes here</div>

    <div class="col">on goes here</div>

    <div class="col">here</div>

    <div class="col">Some description goes here Some description goes here Some description goes here Some description goes hereSome description goes here Some description goes here</div>

</div>

和css

.t-row{
    display: table-row;
}
.col{
    display: table-cell;
    width: 25%;
    border: 1px solid silver;
    padding: 15px;
    background-color: white;
}

见小提琴here

Answer 5

这似乎是flexbox 的最佳时机，我已经制作了一个容器 div 来包围所有 3 个元素并给它display: flex; 我还给下面的每个 div 给了display: flex;（因为这些是需要改变大小的位）。

看看

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  display: flex;
  width: 33.33%;
}
.widget {
  width: 100%;
  margin: 10px;
  padding: 10px;
  background-color: white;
  border: 1px silver solid;
  font-size: 18px;
}
.widget .name {
  font-weight: bold;
  height: 40px;
  color: #082654;
}
.widget .description {
  color: #4AB6E1;
}

<div class="container">
  <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="widget">
      <div class="name">
        Block name
      </div>
      <div class="description">
        Some description goes here
      </div>
    </div>
  </div>

  <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="widget">
      <div class="name">
        Block name
      </div>
      <div class="description">
        Some very long description goes here
      </div>
    </div>
  </div>

  <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="widget">
      <div class="name">
        Block name
      </div>
      <div class="description">
        Some description goes here
      </div>
    </div>
  </div>
</div>

我希望这会有所帮助。