Question

我需要让两个.tinted-container的高度相同（如果可能的话，使用CSS），但每个都在网格列下。

我无法对网格列着色，因为它们使用填充来创建网格列排水沟和我在有色容器之间没有空白区域我给背景着色。
这是一个基于百分比的网格，因此为两者添加了一个边距列的宽度超过100％。

<div class="grid-row">
      <div class="grid-column-half">
        <div class="tinted-container">
          <p>Taller</p>
          <p>column</p>
          <p>on</p>
          <p>left</p>
        </div>
      </div>

      <div class="grid-column-half">
        <div class="tinted-container">
          <p>This container should be the same height as the other one.</p>
        </div>
      </div>
    </div>

如何让容器的高度相同？

Answer 1

Flexbox 可以做到这一点：

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.grid-row {
  display: flex;
}
.grid-column-half {
  border: 1px solid grey;
  width: 50%;
  padding: 10px
}
.tinted-container {
  height: 100%;
  background: pink;
}

＆＃13;

<div class="grid-row">
  <div class="grid-column-half">
    <div class="tinted-container">
      <p>Taller</p>
      <p>column</p>
      <p>on</p>
      <p>left</p>
    </div>
  </div>

  <div class="grid-column-half">
    <div class="tinted-container">
      <p>This container should be the same height as the other one.</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您需要设置div元素的高度以使它们达到相同的大小。

你需要这样做的原因是因为div并不都被设置为一个特定的高度或宽度，它取决于它们包含的内容以及它们包含的内容。通过这样的简单示例，只需设置它的静态高度为200px并放置一个边框，你可以看到div的高度相同。在没有声明高度的情况下，两个div都会有不同的高度，你可以在小提琴上玩这个。

要查看此工作，请查看此处的小提琴：https://jsfiddle.net/john_h/rnnjx28m/

您可以添加此CSS以设置班级的高度：

.tinted-container {
  height: 200px;
  border: 1px solid black;
}

.grid-column-half {
  float: left;
  display: inline-block;
}

你的HTML可以保持不变：

<div class="grid-row">
      <div class="grid-column-half">
        <div class="tinted-container">
          <p>Taller</p>
          <p>column</p>
          <p>on</p>
          <p>left</p>
        </div>
      </div>

      <div class="grid-column-half">
        <div class="tinted-container">
          <p>This container should be the same height as the other one.</p>
        </div>
      </div>
    </div>

您需要使用间距来获得预期的外观！

如何让两个子div相互高度相同

2 个答案: