Question

我有一个包含列表项的页面。它们的显示方式取决于窗口的宽度。在第一个断点之前，它们以移动样式布局显示：

[IMG] http://i58.tinypic.com/zx8djt.png[/IMG]

在第二个断点之后，图片展开并变成圆形保持居中（我会发布此图像，但只允许1个链接）

当宽度超过某个阈值（第三个断点）时，每行最多应显示两个列表项。

如果我申请 float：left;

到列表项，它们都会出现在一行上，但我似乎无法达到预期的效果。

对解决方案的任何帮助都会非常有帮助，因为我已经在这个问题上来回走了2个小时，现在无济于事。

以下是代码（请记住，这是针对大学作业而且HTML无法更改）：

HTML

    <div id="userContainer">
<h2> Users</h2>


<ul id = "users">

    <li>
        <img  src = "pic1.jpg">
        <div class  = "data">J Doe</div>

    </li>


    <li>    
        <img  src = "pic2.jpg"> 
        <div class  = "data"> J Smith</div>

    </li>


    <li>
        <img src = "pic3.jpg">
        <div class  = "data"> L O'Brien</div>
    </li>



    <li>
        <img  src = "pic4.jpg">
        <div class  = "data"> S Fanning</div>
    </li>


    <li>
        <img  src = "pic5.jpg">
        <div class  = "data"> M Brown</div>
    </li>

</ul>

    </div>

CSS

li{
list-style-type: none;
background-color: black;
width: 150px;
margin-bottom: 10px;
border-radius: 50%;
text-align: center;
position: relative;
}

Answer 1

您应该使用媒体查询来控制div的宽度。

在此处发布您的代码，以便为您提供更多帮助。 div是这些图像？

@media screen and (min-width:700px){ /* the threshold  */
div{width: 500px;}
}
@media screen and (max-width:699px){ /* the threshold  */
div{width: 250px;}
}

每行最多显示两个列表项，响应式布局CSS

1 个答案: