我想大致像这样排列元素:
item1 item2 i3 longitemname
i4 longitemname2 anotheritem i5
基本上,不同长度的元素排列在类似表格的结构中。棘手的部分是这些容器的大小可能会有所不同,我想在每一行中尽可能多地容纳 - 换句话说,我不会事先知道一行中有多少元素,以及页面是否调整大小后,元素应重新流动以适应。例如。最初每行可以容纳 10 个元素,但在调整大小时可以减少到 5 个。
我认为我不能使用 html 表格,因为我不知道列数(因为我不知道一行可以容纳多少列)。我可以使用 css 使它们 float ,但由于它们的大小各不相同,因此它们不会排成一行。
到目前为止,我唯一能想到的就是使用 javascript 获取最大元素的大小,将所有元素的大小设置为该大小,然后将所有内容 float 。
有更好的建议吗?
最佳答案
这可以通过使用 float div、计算最大宽度并将所有宽度设置为最大值来完成。这是执行此操作的 jquery 代码:
html:
<div class="item">something</div>
<div class="item">something else</div>
CSS:
div.item { float: left; }
j查询:
var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);
不太丑但也不太漂亮,我仍然愿意接受更好的建议...
关于javascript - 如何在 CSS 的可调整大小的空间中排列不同长度的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/122920/