html - 大的下面有2张图片

Question

由于我之前的问题已得到解答，我希望获得大图像下方的 2 张图像，以便在移动 View 中使用。

我已经尝试移除 float ，但那当然不起作用，好吧，图像在它下面，但不在一起。

/* center element*/

a {
  text-decoration: none;
  color: inherit;
}

.wrapper div {
  display: inline-table;
}


/* Large image */

.big-one {
  float: left;
  text-align: center;
  color: white;
  font-size: 24px;
  width: 70%;
  height: 300px;
  background-image: url('http://www.ajax.nl/upload_mm/1/3/9/cid57927_2017-05-03%20Ajax-Olympique%20Lyon%200426.jpg');
  background-size: cover;
}


/* Small image */

.small-one {
  text-align: center;
  color: white;
  width: 30%;
  height: 150px;
  background-image: url('http://media.nu.nl/m/0czx8wnaol7a_wd640.jpg/ajax-verslaat-koploper-feyenoord-en-brengt-spanning-terug-in-titelstrijd.jpg');
  background-size: cover;
}


/* Small image */

.small-two {
  text-align: center;
  color: white;
  width: 30%;
  height: 150px;
  background-image: url('http://static0.persgroep.net/volkskrant/image/5d4a3648-997a-42c4-b28a-4043136e2e44?width=300');
  background-size: cover;
}

<div class="wrapper">
  <a href="#">
    <div class="big-one">
      <p>
        AJAX DOOR NAAR DE FINALE
      </p>
    </div>
  </a>

  <a href="#">
    <div class="small-one">
      <p>
        Ajax wint van Feyenoord
      </p>
    </div>
  </a>

  <a href="#">
    <div class="small-two">
      <p>
        LIVE: Ajax komt op 1-0
      </p>
    </div>
  </a>
</div>

我该怎么做？我需要做什么？这是没有 float 的屏幕截图:http://image.prntscr.com/image/eb64570782e14dac84ad60a3b8af0cb0.png

非常感谢!

Answer 1

添加dislpay:内联 block ；
.small-one 和 .small-two 类这应该将两个图像放在一起

看看是否可行...

为了移动响应，你想添加一个媒体查询，看起来像这样......

@media only screen and (max-width: 640px) {
.small-one,
.small-two {
宽度:50%
}
如果这还没有解决，那么我将需要查看更多 HTML 和 CSS 以查看父元素