Question

我有2列数据，每列中都有一个段落和一个图像。我想知道是否存在仅CSS的方法来使段落具有相同的高度，以使图像对齐。我知道我可以遍历JavaScript以找到最高的段落，并将另一段落的高度设置为该高度，但是我希望找到一个CSS解决方案。

此外，我无法修改DOM结构。

.container {
  display:flex;
}
  .col {
    padding:0 15px;
  }

<div class="container">
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ultrices nulla ac tempus.</p>
    <img src="http://placehold.it/250x100" />
  </div>
  <div class="col">
    <p>Nam mauris mi, eleifend et rutrum at, dignissim nec elit. Aliquam lacinia tincidunt leo, et pellentesque nibh ultricies ut. Etiam elit purus, blandit ac consequat a, dictum a dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <img src="http://placehold.it/250x100" />
  </div>
</div>

Answer 1

~~我不确定Arup的示例是否符合您的期望-图像仍然无法对齐。~~答案已更新。

以下是适合您的内容：

.container {
  display:flex;
}

.col {
  padding:0 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
} 

.col p {
  flex: 1;
}

我们使用y将主轴设置为flex-direction轴，并证明内容的合理性，以使col div中的所有内容都位于该轴的底部。在段落上设置flex: 1;可以使段落增长以占据div中的可用空间。

Answer 2

添加以下样式。

def get_all_max_values_on(key_name):
    result = []
    # Change max_value to the first element if you have negative values as well
    max_value = -1
    for el in book:
        if el[key_name] > max_value:
            max_value = el[key_name]

    for el in book:
        if el[key_name] == max_value:
           result.append(el)

    return result

Live Example。

Answer 3

您也可以使用flexbox。请参阅CSS中的注释（为清楚起见添加了边界）：

.container {
  display: flex;
}
  .col {
    padding:0 15px;
    display: flex;
    flex-direction: column; /* causes the image to go under the paragraph */
    align-items: flex-start; /* images would stretch over the entire .col width without this */
    border: 1px solid red;
  }
  
  .col p {
  flex: 1; /* makes the paragraph grow to the tallest height available */
  border: 1px solid blue;
  }

<div class="container">
  <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ultrices nulla ac tempus.</p>
    <img src="http://placehold.it/250x100" />
  </div>
  <div class="col">
    <p>Nam mauris mi, eleifend et rutrum at, dignissim nec elit. Aliquam lacinia tincidunt leo, et pellentesque nibh ultricies ut. Etiam elit purus, blandit ac consequat a, dictum a dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <img src="http://placehold.it/250x100" />
  </div>
</div>

仅使用CSS设置特定元素的高度相等？

3 个答案: