Question

我有一个带有一行DIV的引导页面，每个div都有一个图像。在下面的示例中，前两个DIV的高度与调整浏览器大小相同，但第三个div的高度不同，因为图像只有50像素高。

<div class="row">
    <div class="col1 col-md-4">
        <img src="image160x160.jpg" alt="">
    </div>

    <div class="col2 col-md-4">
        <img src="image160x160.jpg" alt="">
    </div>

    <div class="col3 col-md-4">
        <img src="image160x50.jpg" alt="">
    </div>
</div>

我怎样才能确保DIV始终保持相同的高度，无论它们处于什么分辨率？

Answer 1

您可以将row设置为flex-container并设置align-items: stretch：

* {
  box-sizing:border-box;
}
html,body{ 
  margin:0;
}
img {
  display: block;
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.col {
  margin: 8px;
  border: 4px solid darkgoldenrod;
}

<div class="row">
  <div class="col col1">
     <img src="http://via.placeholder.com/160x160"/>
  </div>
  <div class="col col2">
    <img src="http://via.placeholder.com/160x160"/>
  </div>
  <div class="col col3">
    <img src="http://via.placeholder.com/160x50"/> 
  </div>
</div>

注意：如果您选择此方法 - 我建议您将类名从row和col更改为其他内容，因为它可能会与引导程序样式冲突。

Answer 2

您可以在div上设置修复高度，并在img上设置高度：100％

div {
  height: 100px;
  /*Ex*/
}

div img {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
  <div class="col1 col-md-4">
    <img src="http://via.placeholder.com/160x160" />
  </div>

  <div class="col2 col-md-4">
    <img src="http://via.placeholder.com/160x160" />
  </div>

  <div class="col3 col-md-4">
    <img src="http://via.placeholder.com/160x50" />
  </div>
</div>

当图像里面的高度不同时，保持div高度不变

2 个答案: