基于内容

Question

我希望所有news和comments元素具有基于最大元素的相同高度。因此两个列也将具有相同的高度。 最好的只是CSS解决方案。 HTML结构无法更改，元素也可以有不同的父级。 元素中的数据每5分钟通过ajax更改一次，因此重新加载数据后，高度需要更改。

我已经有了JS解决方案，但效率很低。如果没有CSS解决方案，我会坚持这一点。我尝试使用flexbox。

.column2, .column1 {
  border: solid;
  width: 48%;
  position:relative;
  float: left;
}
.news, .comments {
  border: solid;
}

<div class="column1">
  <div class="news" id="news2">
    Some text
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
  <div class="comments" id="comments2">
   A list of comments 
  </div>
</div>
<div class="column2">
  <div class="news" id="news2">
    Some other text
  </div>
  <div class="comments" id="comments2">
    A list of different comments
    <br>
    <br>
    <br>
    <br>
  </div>
</div>

Answer 1

如果您将包装放在父母周围，display将其作为flex，以及父母 >自己，并使用.news制作灵活高度的.comments 或 flex: 1 部分，其中会在 height 中匹配它们，您仍然需要为另一个定义 fixed height，最好与overflow-y: auto一起定义，以实现期望的结果。这就是你可以获得纯粹的 CSS / Flexbox 方式：

＆＃13;

＆＃13;

.flex-container {
  display: flex;
}

.column1, .column2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  border: 1px solid;
}

.news {
  height: 50px;
  border: 1px solid;
  overflow-y: auto;
}

.comments {
  flex: 1;
  border: 1px solid;
}

＆＃13;

<div class="flex-container">
  <div class="column1">
    <div class="news" id="news1">
      Some text
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
    <div class="comments" id="comments1">
     A list of comments
    </div>
  </div>
  <div class="column2">
    <div class="news" id="news2">
      Some other text
    </div>
    <div class="comments" id="comments2">
      A list of different comments
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于它非常灵活，我会将它全部旋转90度并通过行而不是列来接近它。

.row {
  display: flex;
  justify-content: space-between;
  border: thin solid gray;
}

.news,
.comments {
  border: thin solid purple;
  width: 48%;
}

<div class="row">
  <div class="news" id="news1">
    Some other text
  </div>
  <div class="news" id="news2">
    Some text
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
</div>
<div class="row">
  <div class="comments" id="comments1">
    A list of comments
  </div>
  <div class="comments" id="comments2">
    A list of different comments
    <br>
    <br>
    <br>
    <br>
  </div>
</div>