Question

我已经在这里发布了不同的解决方案，以获得两个具有相同高度的列，但遗憾的是我无法使其工作。问题是，我有三个图像，一个在左边的“肖像模式”，两个在右边的“横向模式”。我希望右边的两个图像一起显示与左边图像相同的高度。

我认为这可能是一个解决方案，但我没有让它发挥作用：右边的两个项目每个都可以在左边的div的高度为50％。然后，项目内的图像应填充高度并具有自动宽度。

以下是我的基本代码到目前为止的内容：https://jsfiddle.net/qg7t976L/

.padding-0 {
  padding: 0;
}

img {
  width: 100%;
}

img {
  border: 1px white solid;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="work" class="content">
  <div class="container-fluid work-body">
    <div class="row">
      <div class="padding-0 col-sm-6">
        <div class="work-inner">
          <div class="work-item">
            <img src="http://placehold.it/500x750" alt="work1">
          </div>
          <!--/.work-item-->
        </div>
        <!--/.work-inner-->
      </div>
      <div class="padding-0 col-sm-6">
        <div class="padding-0 work-inner col-sm-12">
          <div class="work-item">
            <img src="https://placehold.it/450x250" alt="work2">
          </div>
          <!--/.work-item-->
        </div>
        <div class="padding-0 work-inner col-sm-12">
          <div class="work-item">
            <img src="https://placehold.it/500x250" alt="work3">
          </div>
          <!--/.work-item-->
        </div>
      </div>
    </div>
  </div>
  <!--/.container-->
</div>
<!--/work-->

Answer 1

您可以尝试使用这些代码。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row row--equal">
      <div class="col-md-6 no-padding">
        <div class="item item--full-height">
          <img src="https://i.stack.imgur.com/WS7U5.png" alt="">
    </div>
  </div>
  <div class="col-md-6 item--half-height no-padding">
    <div class="item ">
      <img src="https://i.stack.imgur.com/cslWU.png" alt="">
    </div>
    <div class="item item--half-height">
      <img src="https://i.stack.imgur.com/niAPD.png" alt="">
    </div>
  </div>
</div>
  </div>
</body>
</html>

CSS：

.row--equal{
  display: flex;
}
.no-padding{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.item{
  margin-right: 1px;
  margin-bottom: 1px;
}
.item img{
  width: 100%;
  height: 100%;
}
.item--full-height{
  height: 100%;
}
.item--half-height{
  height: 50%;
}

Bootstrap - 两列相同的高度，里面有三个响应图像（一个左边和两个右边）

1 个答案: