如何对齐两个高度相同的div？

Question

我希望将两个div（或类似的东西）彼此相邻并使用相同的height来帮助我实现这一目标：

此外，我目前正在为图像使用一些HTML代码和一些css效果：

.hoverAm figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.hoverAm figure:hover img {
  opacity: .5;
}

<div>
  <p>AUTUMN OUTFIT</p>
  <p>Some other text</p>
</div>
<div class="hoverAm column" style="width:100%;height:100%;">
  <div style="width:100%">
    <figure>
      <img src="http://lorempixel.com/400/200/sports/1/" alt="Charlie Henry Adventure" style="width:100%;height:100%;" />
    </figure>
  </div>
</div>

Answer 1

您可以使用flexbox

执行此操作

注意：避免使用内联样式。

body,
figure {
  margin: 0
}
.hoverAm {
  display: flex
}
figure,
.text {
  flex: 1;
  background: red
}
.hoverAm figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  width: 100%;
  display: block
}
.hoverAm figure:hover img {
  opacity: .5;
}

<div class="hoverAm column">
  <figure>
    <img src="//dummyimage.com/200x400" alt="Charlie Henry Adventure" />
  </figure>
  <div class="text">
    some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes
    here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some text goes here some
    text goes here
  </div>
</div>

Answer 2

使用flexbox可以非常轻松地完成此操作。这是一个简单易用的版本：

<强> HTML

<div class="container">
    <div class="content">Content</div>
    <div class="image">Image</div>
</div>

<强> CSS：

.container {
    display: flex;
}

.image {
    width: 200px;
    height: 100px;
    background: blue;
}

.content {
    height: 100px;
    width: 500px;
    background: red;
}

小提琴：https://jsfiddle.net/p4nnyxsw/

了解有关Flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

提示，下次在SO上发帖：发布一些与您的问题相关的代码

Answer 3

作为一个处理CSS的程序员总是把我弄得很开心，所以我更喜欢使用bootstrap（http://getbootstrap.com/）之类的框架。我不知道您项目的具体情况，但如果您愿意接受建议，我可以用一些代码来表达您的想法：

<div class="row">
     <div class="col-md-6">
        image 1
     </div>
     <div class="col-md-6>
        image 2
      </div>
</div>

col-md-x中的数字x表示div的宽度，考虑到每行应被视为col-md-12