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

添加 var date = new Date(); 到.small-one和.small-two类这应该把两个图像推到一起

看看是否有效......

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

dislpay: inline-block; 如果这还没有解决它，那么我需要看到更多的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 个答案: