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;
}

以下是TreeView

jsfiddle 问题是我希望它们具有一定的高度：例如80px，导致它的大小几乎适用于所有情况，但很少我在小部件描述中有一些更长的内容然后它开箱即用。所以在这种情况下，我喜欢它的高度以适应内容大小和所有其他小部件也适应它的高度。当我将窗口小部件高度设置为自动时 - 只有单个窗口小部件在高度上伸展并且看起来不均匀。任何想法如何改变风格，以实现我的需要？

Answer 1

我可以使用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 2

这似乎是flexbox的完美时间，我已经创建了一个容器div来包围所有3个元素，并给它display: flex;我还给了display: flex;每个div轰鸣声那（因为这些是需要改变大小的位）。

看看

* {
  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>

我希望这会有所帮助。

Answer 3

您可以尝试使用diplay：table

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 4

使用Template.foo.helpers({ data: function() { return Template.instance().myData.get(); }, });浮动元素以使父元素获取其子元素高度的累积高度。还要在父元素中使用float:left，因为高度是不可预测的。

height:auto;

Answer 5

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

<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 个答案: