0

嗨，我正在尝试使这个 UL 以 1024x768 分辨率响应。

这是列表：

<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 时，我希望图片分为两列而不是四列。

--- 得到它的工作！感谢您的回复！

4

4 回答 4

1

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

由于 img 包含在 li 中，因此您当前的媒体查询未按预期工作。

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

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

    .beforeafterpics li{
        width: 50%;
    }
}

这是小提琴

我不确定您的 UL 在您的页面中的位置，但例如，我已将 100% 用于 UL 宽度。

另外值得注意的是，您正在使用inline-block您的 li。为了让它们以 50% 的宽度彼此相邻，您需要解决使用内联块时出现的空白问题。在我的示例中，我添加了：

.beforeafterpics {
    font-size: 0;
}

为了纠正这个例子。

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

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

于 2013-09-18T13:19:46.350 回答
0

在您原来的 css 中将您的 li 项向左浮动（对于跨浏览器也更好）

原始CSS：

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

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

媒体查询CSS：

.beforeafterpics li:nth-child(3){clear:left;}
于 2013-09-18T13:20:19.107 回答
0

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

@media only screen and (max-device-width : 1024px) {
    .ba-bg {
        width: 50%;
    }
    li.nth-child(2):after {
        content:"\a"; white-space:pre; 
    }
}
于 2013-09-18T13:20:52.230 回答
0

以下应该做到这一点。如果没有，请制作一个小提琴，以便我们可以看到可能是什么干扰。在适当的地方添加类名。

li {
    width:25%
}    

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    li {
        width:50%;
    }
}
于 2013-09-18T13:18:20.923 回答