大的下面有2张图片

Question

由于我之前的问题已得到解答，我希望获得大图像下方的 2 个图像以用于移动视图。

我试过删除浮动，但那当然不行，好吧，图像在它下面，但不在一起。

/* 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>

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

非常感谢！

Answer 1

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

看看是否可行...

对于移动响应，您想添加一个媒体查询，它可能看起来像这样......

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

Answer 2

我通过将小项目的宽度增加 50% 来解决这个问题

@media only screen and (max-width: 640px)
.item-big {
    position: relative;
    display: block;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 24px;
    width: 100%;
    height: 300px;
    background-size: cover;
}

@media only screen and (max-width: 640px)
.item-small {
    font-size: 17px;
    float: left;
    text-align: center;
    font-weight: bold;
    color: white;
    width: 50%;
    height: 150px;
    background-size: cover;
    display: block;
}

大的下面有2张图片

2 images underneath the big one

html

css

image

responsive