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

-1

我有一个包含列表项的页面。根据窗口宽度的不同，这些显示会有所不同。第一个断点之前，他们出现在移动式布局：显示每行最多两个列表项，响应式布局CSS

[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; 
}

来源

2014-08-31 omusanon

编辑：[IMG] http://i62.tinypic.com/11biw6w.png [/ IMG] - 这是一个预期的效果时，浏览器窗口变过去的大约700像素 – omusanon 2014-08-31 13:47:39

发布您的代码，请。这样我们可以给你的例子定制帮助。 – 2014-08-31 13:55:26

在漂浮的lis上设置50％的宽度 – powerbuoy 2014-08-31 13:55:53

您应该简单地控制媒体查询的div的宽度。

在这里发布您的代码，以帮助您更多。在哪些div是这些图像？

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

来源

2014-08-31 13:54:49

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

回答

相关问题