Question

我有一大堆“li”元素（由图像和几行文本组成）驻留在内容div中。我的“li”元素大小不一（有些链接很长，有些有长标题等）

我想尽可能两列;我需要做出响应，所以当我进入移动设备时，我可能会有一个列。我认为有一个固定大小的“li”可以做到这一点，但显然不是。每次其中一个标题或链接比另一个更长时，它会抛弃所有块。

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

<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。

＆＃13;

#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*/  
}

＆＃13;

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

＆＃13;

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

＆＃13;

添加媒体查询：

＆＃13;

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

＆＃13;

JSFIDDLE

html条目水平，两个跨线均匀

2 个答案: