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

Posted 2023-03-06

【中文标题】根据兄弟姐妹的高度调整元素的高度[重复]

【英文标题】：Adapt height of the elements based on siblings height [duplicate]

【发布时间】：2017-02-16 08:28:12

【问题描述】：

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

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

【问题讨论】：

如何使用display:table-cell

min-height: 80px;

@dNitro，它只制作一个小部件来适应它的高度

Would one of these ideas work?

【参考方案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>

【讨论】：

否则你可以使用 jquery 找到高度，并将该高度分配给其他 div

我宁愿不用javascript

试试上面的 display:table

它似乎没有帮助jsfiddle.net/audssc1v/2。我试过了，它只制作了一个小部件来适应所有其他小部件

【参考方案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);

【参考方案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;
    

【讨论】：

这会有所帮助，但是当描述适合一行时，我仍然希望小部件的高度为 80px。你有什么想法吗？

【参考方案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

【参考方案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>

我希望这会有所帮助。