Question

您好我正在尝试以1024x768分辨率制作此UL响应。

这是清单：

<ul class="beforeafterpics">
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
</ul>

这是最初的CSS：

.beforeafterpics {
    text-align: center;
}
.beforeafterpics li{
    display: inline-block; 
    list-style-type: none;
}
.ba-bg {background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    padding: 4px;
}

这是媒体查询：

<style type="text/css">
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    {
        .ba-bg {
            width: 50%;
        }
    }
</style>

当浏览器的分辨率为1024x768时，我希望图片分为两列而不是四列。

---搞定了！谢谢你的回复！

Answer 1

您正在使用媒体查询更改img，而不是li。

由于li包含了img，因此您当前的媒体查询无法正常工作。

您需要将媒体查询添加到li的宽度

@media only screen and (max-width: 1024px) and (min-width: 768px) {

    .beforeafterpics li{
        width: 50%;
    }
}

HERES THE FIDDLE

我不确定您的UL在您的页面中的位置，但例如我使用100％的UL宽度。

另外值得注意的是，你正在使用inline-block作为你的李。为了使它们使用50％宽度彼此相邻，您需要修复使用内嵌块发生的空白问题。在我的例子中，我添加了：

.beforeafterpics {
    font-size: 0;
}

为了纠正这个例子。

有关内联块空格问题的更多信息以及纠正它的不同方法：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

以下应该这样做。如果没有，请做一个小提琴，这样我们就可以看到可能会干扰的东西。在适当的地方添加类名。

li {
    width:25%
}    

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    li {
        width:50%;
    }
}

Answer 3

在你的原始css浮动你的li项目（更好的跨浏览器）

原创CSS：

.beforeafterpics li{float:left; display:block; list-style-type: none;}

然后在您的媒体查询中清除第三个列表项以将其关闭。

媒体查询css：

.beforeafterpics li:nth-child(3){clear:left;}

Answer 4

尝试更改媒体查询，如下所示：

@media only screen and (max-device-width : 1024px) {
    .ba-bg {
        width: 50%;
    }
    li.nth-child(2):after {
        content:"\a"; white-space:pre; 
    }
}

响应的UL图像列表

4 个答案: