html条目水平，两个交叉 - 均匀排列

Question

我有一大组“li”元素（由一个图像和几行文本组成）位于内容 div 中。我的“li”元素的大小会有所不同（有些有长链接，有些有长标题等）

如果可能，我希望有两列；我需要做出响应，所以当我使用移动设备时，我可能会有一栏。我认为有一个固定大小的“li”可以解决问题，但显然不是。每次标题或链接中的一个比另一个长时，它都会抛出所有块。

使用“li”元素会更好地使用 div 吗？

<div>
    <img src="test.png" />
    <h2>One -  average title is here</h2>
    <h3><a href="link 1">Link is here  and this might be long also</a></h3>
</div>

如果没有“li”的固定高度，有没有更好的方法来做到这一点？为什么我的第一个元素总是显得更低？我知道这不是火箭科学，但我似乎想不出解决办法。

jsfiddle

Answer 1

我认为下面的布局更好：

（尝试将浏览器窗口的大小调整为小于480px 以查看移动布局。）

*{
  margin: 0px;
  padding: 0px;
}

html, body{
  width: 100%;
}

li{
  width: 40%;
  vertical-align: top;

}

@media screen and (max-width: 480px){
  li{
    width: 80%;
  }    
}

ul,li { 
  padding: 0; 
  margin: 0; 
}

#links {  
  font-size: 0; 
  text-align: center;
}

#links li { 
  font-size: 12px; 
  display: inline-block; 
  border: 1px solid #000000; 
  padding: 2px;  
  background: #c0c0c0; 
  margin: 5px; 
}

#links li h2 { 
  font-size: 1em; 
}

<ul id="links">
  <li>
    <img src="test.png" />
    <h2>One -  average title is here</h2>
    <h3><a href="link 1">Link is here  and this might be long also</a></h3>
  </li>
  <li>
    <img src="test.png" />
    <h2>Two - this title is here and is really, really long</h2>
    <h3><a href="link 1">Link is here </a></h3>
  </li>
  <li>
    <img src="test.png" />
    <h2>Threee -title is here</h2>
    <h3><a href="link 1">Link is here </a></h3>
  </li>
  <li>
    <img src="test.png" />
    <h2>Four - this title is here and is really, really long</h2>
    <h3><a href="link 1">Link is here </a></h3>
  </li>
  <li>
    <img src="test.png" />
    <h2>Five title is here</h2>
    <h3><a href="link 1">Link is here </a></h3>
  </li>
  <li>
    <img src="test.png" />
    <h2>Six title is here</h2>
    <h3><a href="link 1">Link is here and this area can be long also </a></h3>
  </li>    


</ul>

Updated jsFiddle Demo

阅读：CSS @media queries | MDN

Answer 2

去掉那个固定的大小，换成float: left。

#links li { 
  font-size: 12px; 
  border: 1px solid #000000; 
  padding: 0;  
  background: #c0c0c0; 
  
  float: left;     /*change here*/
  margin: 2%;      /*responsive margin*/
  width: 45%;      /*and width*/  
}

现在清除每个 2n + 1 div 的左侧：

#links li:nth-child(2n + 1){
    clear: left;
}

并添加媒体查询：

@media screen and (max-width: 400px){
    #links li {
        margin: 2% 0;
        width: 97%;
    }
}

JSFIDDLE.