試圖在三個垂直列中的用戶列表

我試圖做一個像我在下面的圖像中的結構。每列有3個項目的用戶列表。試圖在三個垂直列中的用戶列表

但我沒有成功做到這一點。

enter image description here

我這裏有我的例子就是即時通訊有： http://jsfiddle.net/81j72gx1/2/

你能給我幫助，瞭解什麼是錯在我的代碼？

這是我的html：

<div id="wrapper"> 
    <div id="header"> 
     <div id="left"> 
      <h1>Services</h1> 
     </div> 
     <div id="right"> 
      <span>User:</span> 
      <span>John</span> 
      <a href="#">(close)</a> 
     </div> 
    </div> 
    <div id="menu"> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      <li><a href="#">Link 5</a></li> 
      <li><a href="#">Link 6</a></li> 
     </ul> 
    </div> 
    <div id="content"> 
     <h2>User</h2> 
     <form> 
      Order by:<select> 
       <option value="Test" name="test">test</option> 
       <option value="Test" name="test">test</option> 
       <option value="Test" name="test">test</option> 
      </select> 
      All: <select> 
       <option value="Test" name="test">test</option> 
       <option value="Test" name="test">test</option> 
       <option value="Test" name="test">test</option> 
      </select> 
      Status:<select> 
       <option value="Test" name="test">test</option> 
       <option value="Test" name="test">test</option> 
      </select> 
      <input type="submit" Value="Update"/> 
     </form> 
     <div id="lists_container"> 
      <div class="list1"> 
       <ul> 
        <li><img src="http://placehold.it/50x80"/></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </div> 
      <div class="list2"> 
       <ul> 
        <li><img src="http://placehold.it/50x80"/></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </div> 
      <div class="list3"> 
       <ul> 
        <li><img src="http://placehold.it/50x80"/></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div>

而且我的CSS：

*{margin:0;padding:0;} 
#wrapper{ 
width:900px; margin:0 auto; 
} 
#header{ 
width:100%; float:left; 
} 
#header #left { 
float:left; 
} 
#header #right { 
float:right; 
} 
#header #right a{ 
color:#000; 
} 
#menu{ 
width:100%; float:left; height:50px; background:#ccc; 
} 
#menu ul{ 
list-style:none; 
} 
#menu ul li { 
float:left;line-height:50px; 
} 
#menu ul li a{ 
text-decoration:none; color:#000; display:block; margin-right:20px; 
} 
#menu ul li a:hover{ 
color:#fff; background:#000; 
} 
#content { 
float:left; width:100%; margin-top:20px; 
} 
#lists_container{ 
float:left;width:100%; 
} 

.list1 ul li img{ 
float:left; margin-right:10px; 
} 

.list1 ul li{ 
list-style:none; 
} 
.list2{ 
float:left; 
} 
.list2 ul li img{ 
float:left; margin-right:10px; 
} 
.list2 ul li{ 
list-style:none; 
} 
.list2 ul{ 
list-style:none; 
} 
.list3 ul{ 
list-style:none; 
}

來源

2014-08-31 UserX

你爲什麼不只是使用一個表，這是很容易的工作，尤其是在你的情況。 – mavili 2014-08-31 15:09:10

它更好，如果你可以使用一些div類或一些表......因爲你的代碼似乎很複雜 – Shashank 2014-08-31 15:12:19

沒有時間去調試代碼，但我爲您提供的解決方案是非常乾淨的，以顯示結果網格。

檢查在這裏： http://jsfiddle.net/ez22e9xv/1/

你應該只調整每個li元素的寬度符合你的容器的寬度，或者如果你的寬度爲汽車，這將是一種「敏感」的。

的CSS：

ul.myList { 
    list-style:none; 
    margin:0 0 0 -10px; 
    padding:0; 
} 

ul.myList li { 
    float: left; 
    width: 200px; 
    height: 80px; 
    margin-bottom: 10px; 
    margin-left: 10px; 
    overflow: hidden; 
    background: #eee; 
} 

ul.myList li img { 
    float: left; 
    margin-right: 10px; 
} 

ul.myList li span { 
    display:block; 
}

HTML：

<ul class="myList"> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
    <li> 
     <img src="http://placehold.it/50x80" /> 
     <span class="name"><a href="#">John Cooper</a></span> 
     <span class="number">Nº 20</span> 
     <span class="email"><a href="#">[email protected]</a></span> 
    </li> 
</ul>

來源

2014-08-31 15:18:13

非常感謝你，非常好，簡單的解決方案！ – UserX 2014-08-31 15:59:29

試圖在三個垂直列中的用戶列表

回答

相關問題