顯示每行最多兩個列表項，響應式佈局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

回答

相關問題