如何在CSS中的可调整大小的空间中排列不同长度的项目？

发布于 2024-07-06 03:44:56 字数 493 浏览 8 评论 0原文

我想大致这样排列项目：

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

基本上，不同长度的项目排列在类似表格的结构中。棘手的部分是这些容器的大小可能会有所不同，我想在每一行中容纳尽可能多的项目 - 换句话说，我事先不知道一行中可以容纳多少项目，以及页面是否适合调整大小后，项目应该重新流动以适应。例如，最初每行可以容纳 10 个项目，但在调整大小时可以减少到 5 个。

我认为我不能使用 html 表格，因为我不知道列数（因为我不知道有多少列）将适合一条线）。我可以使用 css 来浮动它们，但由于它们的大小不同，因此它们不会对齐。

到目前为止，我唯一能想到的就是使用 javascript 获取最大项目的大小，将所有项目的大小设置为该大小，然后浮动剩下的所有内容。

还有更好的建议吗？

原文

I'd like to line up items approximately like this:

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

Basically items of varying length arranged in a table like structure. The tricky part is the container for these can vary in size and I'd like to fit as many as I can in each row - in other words, I won't know beforehand how many items fit in a line, and if the page is resized the items should re-flow themselves to accommodate. E.g. initially 10 items could fit on each line, but on resize it could be reduced to 5.

I don't think I can use an html table since I don't know the number of columns (since I don't know how many will fit on a line). I can use css to float them, but since they're of varying size they won't line up.

So far the only thing I can think of is to use javascript to get the size of largest item, set the size of all items to that size, and float everything left.

Any better suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

转身以后 2024-07-13 03:44:56

当你得到一件大得离谱的东西而让其他东西看起来很小时，会发生什么？我会考虑两种解决方案：

您已经想出的涉及 float:left; 的解决方案规则和 jQuery，但也有一个最大 max_width 或只需
根据您期望的值预先决定所有项目的预设宽度

然后添加溢出：隐藏; 规则，以便较长的物品不会破坏桌面外观。您甚至可以更改 jQuery 函数来修剪较长的项目，在末尾添加省略号 (...)。

回复收藏 0 原文

揽月 2024-07-13 03:44:56

这可以使用浮动 div 来完成，计算最大宽度，并将所有宽度设置为最大值。这是执行此操作的 jquery 代码：

html:

<div class="item">something</div>
<div class="item">something else</div>

css:

div.item { float: left; }

jquery:

var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);

不太难看，但也不太漂亮，我仍然愿意接受更好的建议...

This can be done using floated div's, calculating the max width, and setting all widths to the max. Here's jquery code to do it:

html:

<div class="item">something</div>
<div class="item">something else</div>

css:

div.item { float: left; }

jquery:

var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);

Not too ugly but not too pretty either, I'm still open to better suggestions...

回复收藏 0 原文

匿名。 2024-07-13 03:44:56

您可以使用以下内容，使每列具有相同的宽度。

您将拥有固定的列宽，但列表会自动重排。
我添加了一些额外的 HTML，但现在它可以在 FF 和 IE 中运行。

html:

<ul class="ColumnBasedList">
  <li><span>Item1 2</span></li>
  <li><span>Item2 3</span></li>
  <li><span>Item3 5</span></li>
  <li><span>Item4 6</span></li>
  <li><span>Item5 7</span></li>
  <li><span>Item6 8</span></li>
</ul>

css:

.ColumnBasedList
{
    width: 80%;
    margin: 0;
    padding: 0;
}

.ColumnBasedList li
{
    list-style-type: none;
    display:inline;
}

.ColumnBasedList li span
{
    display: -moz-inline-block;
    display: inline-block;
    width: 20em;
    margin: 0.3em;
}

You could use the following with each column the same width.

You'll have a fixed column width, but the list will reflow itself automatically.
I added a little bit of extra HTML but now it works in FF en IE.

html:

<ul class="ColumnBasedList">
  <li><span>Item1 2</span></li>
  <li><span>Item2 3</span></li>
  <li><span>Item3 5</span></li>
  <li><span>Item4 6</span></li>
  <li><span>Item5 7</span></li>
  <li><span>Item6 8</span></li>
</ul>

css:

.ColumnBasedList
{
    width: 80%;
    margin: 0;
    padding: 0;
}

.ColumnBasedList li
{
    list-style-type: none;
    display:inline;
}

.ColumnBasedList li span
{
    display: -moz-inline-block;
    display: inline-block;
    width: 20em;
    margin: 0.3em;
}

回复收藏 0 原文

找个人就嫁了吧 2024-07-13 03:44:56

您可以浮动几个无序列表，如下所示：

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

这需要您对应将多少列表中的多少列表项推入 DOM 进行一些计算，但是这样 - 当您重新调整容纳容器的大小时列表 - 列表将浮动以适合该容器。

You could float a couple of unordered lists, like this:

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

It would require you to do some calculations on how many list-items in how many lists should be shoved into the DOM, but this way - when you re-size the container which holds the lists - the lists will float to fit into that container.

回复收藏 0 原文