如何将一行中的两个元素共享相同的高度,而行上没有固定的高度?

时间:2015-12-09 20:05:58

标签: css

Codepen展示了我所谈论的内容:

http://codepen.io/anon/pen/dGopxL

有没有办法让第二列(红色背景)始终与第一列的高度相同?

使高度100%不起作用,因为我从未设定固定高度,所以我不确定如何做到这一点。我可以使用Javascript / jQuery将它们设置为彼此相等,并在页面调整大小时不断更新它,但如果可能的话,我想在没有JS的情况下进行更新。

任何提示?

以下是Codepen的代码:



.container {
  width: 800px;
  margin: 0 auto;
  background-color: #EEE;
}
div {
  display: inline-block;
}
.col1 {
  width: 50%;
}
.col2 {
  background-color: tomato;
  width: 50%;
  text-align: center;
  vertical-align: top;
}

<div class="container">
  <div class="col1">
    <img src="http://placecage.com/400/400">
  </div>
  <div class="col2">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案