如何让两个div具有相同的高度和宽度？

Question

我正在开发一个显示抽认卡的HTML网页。这些抽认卡有正面和背面的描述，以及在正面和背面都有图像或链接视频的可能性。正面和背面显示在单独的div中，我正在使用Bootstrap。我将每个div的背景设置为白色，但在这样做后我意识到它们的高度不同。

这不起作用，如上图所示。

＆＃13;

＆＃13;

#front_card,
#back_card {
  background-color: white;
}

.row.col-sm-4 {
  display: flex;
}

.col-sm-4 {
  flex: 1;
  padding: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row" id="study-row">
  <div class="col-sm-4" id="white-col">
    <h3> Front </h3>
    <div id="front_card"></div>
  </div>
  <div class="col-sm-4" id="white-col">
    <h3> Back </h3>
    <div id="back_card"></div>
  </div>
  <div class="col-sm-4">
    <button class="right" id="flip_card" type="submit">Flip Card</button><br /> <br />
    <button class="right" id="next_card" type="submit">Next Card</button><br />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用flex为div兄弟设置相同的高度......就像这样

#front_card,
#back_card {
  background-color: red;
  padding:5px;
  overflow:hidden;
  min-height:100%;
}
#front_card img{
width:100%;
}

.row{
  display: flex;
}

.col-sm-4,.col-xs-4 {
  flex: 1;
  padding: 1em;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row" id="study-row">
  <div class="col-sm-4 col-xs-4" id="white-col">
    <h3> Front </h3>
    <div id="front_card">
      <img src="http://placehold.it/150x350">
    </div>
  </div>
  <div class="col-sm-4 col-xs-4" id="white-col">
    <h3> Back </h3>
    <div id="back_card"></div>
  </div>
  <div class="col-sm-4 col-xs-4">
    <button class="right" id="flip_card" type="submit">Flip Card</button><br /> <br />
    <button class="right" id="next_card" type="submit">Next Card</button><br />
  </div>
</div>