-3

我已经尝试过这里发布的不同解决方案来获得具有相同高度的两列，但不幸的是我无法让它工作。问题是，我有三张图片，一张在“人像模式”的左侧，两张在“横向模式”的右侧。我希望右侧的两个图像一起具有与左侧图像相同的高度。

我认为这可能是一个解决方案，但我没有让它起作用：右边的两个项目每个都可以有左边 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-->

4

1 回答 1

0

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

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%;
}
于 2017-05-16T19:08:25.030 回答