Question

我在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元素都是从控制器动态添加的。我想我可以计算并给每个人一个特定的“顶级”|“底部”课程，但这是我努力避免的一件事！如果可以的话。

Answer 1

您可以将所有物品插入表格，以便将它们放到正确的位置，就像您喜欢的那样。但这是一种古老的编程风格，不再使用了。（由于屏幕分辨率不同，你必须在这里处理最小和最大宽度！）

另一个选项（这里最好的选择）是将你的Big项目放入div框，A + 1和B + 2也加入div。在A + 1漂浮之后将它们并排浮动并且它会起作用我认为它会起作用。（并且不要忘记所有项目的div;））

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

希望它有效，如果你有div代码的问题来处理写我。

@Johan Bouveng !!!是的，你是对的，但这不是最终的解决方案，不久之前或之后他必须将其改为div格式。你不会在日常生活中找到那种代码。

Answer 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;}

是否可以使用纯CSS，最好与版本2兼容

2 个答案: