javascript - 3 行 ul，屏幕宽度可变

Question

从我无法访问的 PHP 文件中，我收到了一堆 <li>类为“liElHtml”的元素。包含在这些图片中，所以基本上我是通过 AJAX 接收的:

<li class="liElHtml"><img src="some_img.png" /></li> 

有没有办法在没有静态宽度的情况下将这些整齐/均匀地堆叠成 3 行？我知道如何通过设置 3 <li> 的组合宽度来做到这一点的唯一方法到 <ul> .我四处搜索，似乎静态宽度是我看到的唯一方式。

不幸的是，这必须是 100% 宽度的 3 行才能填满屏幕，因为它适用于手机。 现在只是为了让它工作，我设置了一个静态宽度，所以我有 html:

<ul id="mainScreenUL">
</ul>

CSS:

#mainScreenUL{
    list-style:none;
    width:150px;
}

#liElHtml{
   display:inline-block;
   width:50px;
   height:50px;
}

还有 jQuery/javascript

$('#mainScreenUL').html(pic_data[1]);

pic_data[1]只是一长串 <li class="liElHtml"><img src="some_img.png" /></li>

这给了我一些想要的效果，无论如何我可以将宽度设置为 width:100%在 #mainScreenUL并得到 <li>整齐地堆成只有 3 排？ 感谢您花时间阅读本文，我们将不胜感激。

Answer 1

如果所有 li 具有相同的高度，您可以轻松地 float 它们并以这种方式分配 33.33% 的宽度

li {
   float: left;
   width: 33.33%;
}

然后只记得对 ul 元素应用 float 清除