Html 大屏幕下有两张图片

正如我前面的问题已经得到回答，我期待着得到下面的大一个在移动视图中使用的2个图像

我试着移除浮标，但那当然不起作用，好吧，图像在它下面，但不能在一起

/*中心元素*/
a{
文字装饰：无；
颜色：继承；
}
.包装部{
显示：内联表；
}
/*大图像*/
.大的{
浮动：左；
文本对齐：居中；
颜色：白色；
字体大小：24px；
宽度：70%；
高度：300px；
背景图像：url（'http://www.ajax.nl/upload_mm/1/3/9/cid57927_2017-05-03%20Ajax-奥林匹克20%里昂200426.jpg'）；
背景尺寸：封面；
}
/*小图像*/
.小的{
文本对齐：居中；
颜色：白色；
宽度：30%；
高度：150像素；
背景图像：url（'http://media.nu.nl/m/0czx8wnaol7a_wd640.jpg/ajax-verslaat-koploper-feyenoord-en-brengt-spanning-terug-in-titelstrijd.jpg');
背景尺寸：封面；
}
/*小图像*/
.小二{
文本对齐：居中；
颜色：白色；
宽度：30%；
高度：150像素；
背景图像：url（'http://static0.persgroep.net/volkskrant/image/5d4a3648-997a-42c4-b28a-4043136e2e44?width=300');
背景尺寸：封面；
}

添加

dislpay：内联块；

去。小一班和小二班 这会将两个图像推到一起

看看这是否有效

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

@仅媒体屏幕和（最大宽度：640px）{
.小的，
.小二{
宽度：50%
}

---

如果这个问题没有解决，那么我需要查看更多的HTML和CSS来查看父元素。

我通过将小项目的宽度增加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;
}

---

我不知道你在要求什么。你想把两张较小的图片放在大图片下面，你想把两张较小的图片并排放在一起吗？看起来你已经有了。缺少什么？这正是我想要的。嗯，小图片之间还有一些空间。你试着将边距、填充和边框设置为元素上的0？例如，边距：0、填充：0、边框：0。这不起作用。