0

我在 div 中有一个与 Hulu 行上的媒体文件相当的布局。就像是

*---------------*  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item A  |  |    Item B  |
|               |  *------------*  *------------*
|   Big Item    |
|               |  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item 1  |  |    Item 2  |
*---------------*  *------------*  *------------*

这里的问题是物品的“顺序”。

项目的 dom 中的顺序是 A、B、1、2

但是，您会注意到 A 和 B 是并排的，就像 1 和 2 一样。我希望A 和 B 堆叠在第一列，然后是 1 和 2，然后是其他任何等等......

像这样：

*---------------*  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item A  |  |    Item 1  |
|               |  *------------*  *------------*
|   Big Item    |
|               |  *------------*  *------------*
|               |  |    Small   |  |    Small   |
|               |  |    Item B  |  |    Item 2  |
*---------------*  *------------*  *------------*

布局位于以下 HTML 中：

<ul>
    <li>big item</li>
    <li>small item A</li>
    <li>small item B</li>
    <li>small item 1</li>
    <li>small item 2</li>
    ......

到目前为止，通过使我的 UL 具有特定宽度，我是如何让较小的项目堆叠起来的，但就像我说的，我希望它们按 DOM 中的放置顺序堆叠。

不，我没有小提琴，因为这是我为 jcarousel 定制的皮肤的一部分，老实说，用我的自定义皮肤和动态列表项来做这个例子的短小提琴比想象的要难这个问题出来了……我想！

这提醒了我，所有这些 li 元素都是从控制器动态添加的。我想我可以计算并给每个人一个特定的“顶部”|“底部”类，但这是我非常努力避免的一件事！如果我能。

4

2 回答 2

2

可以根据需要将所有项目插入表格以将它们放置到正确的位置。但这是一种不再使用的老式编程风格。（由于屏幕分辨率不同，您必须注意这里的最小和最大宽度！）

另一种选择（也是最好的选择）是将您的 Big item 放入一个 div 框，并将 A+1 和 B+2 放入 div 中。在 A+1 浮动之后将它们并排浮动，我认为它会起作用。（并且不要忘记所有项目周围的 div ；））

第二种解决方案应该是您的选择，因为您也可以在智能手机上轻松获取 div 解决方案，并且您将节省大量无需输入的代码。

希望它有效，如果您对处理的 div 代码有问题，请写信给我。

@约翰布文！！！是的，您是对的，但这不是最终解决方案，早晚他必须将其更改为 div 格式。你不会在日常生活中找到那种代码。

于 2013-07-16T08:16:13.683 回答
2

这是最小的最小示例，更改了堆叠顺序，没有 div，只有 css。

http://jsfiddle.net/mm58g/

<ul>
    <li class="big">Big</li>
    <li class="small">Small A</li>
    <li class="small">Small 1</li>
    <li class="small">Small B</li>
    <li class="small">Small 2</li>
</ul>

ul{width:500px;padding:0;overflow:hidden;}
li{border:1px solid green;list-style-type:none;}
.big{width:150px;height:150px;float:left;}
.small{width:120px;height:65px;float:left;margin:0 0 20px 20px;}
于 2013-07-16T08:37:10.843 回答