Question

我与设计师的桌面设备和移动设备组合一直在讨论的一件事是重新排序HTML元素。我的页面必须跨越所有断点，因此在浏览器调整大小时文本会包装/扩展（因此所有内容的高度始终是可变的）。

以下是一些场景:(管道代表浮动或列）

桌面：

第1项|第2项第3项

移动：

第3项第1项第2项

桌面：

利

- 内容

移动

利

- 保留背景图片

- 用白色bg显示背景图像下面的li的内容（所以基本上在LI之外）

使用流畅布局在各个断点处重新排序HTML元素的最佳方法（如果有的话）是什么？似乎使用JavaScript来监听窗口调整大小是一种过度杀伤，当必须重新安排多个元素时，绝对定位不起作用。

如果有人知道某个解决方案，那么如果你可以在JSFiddle上发布它就会很棒。

Answer 1

以下是使用float和position: absolute组合的示例。

http://jsfiddle.net/qmWwp/

<强> HTML

<div class="group" id="wrapper">
    <div class="content" id="item1">ITEM 1</div>
    <div class="content" id="item2">ITEM 2</div>
    <div class="content" id="item3">ITEM 3</div>
</div>

<强> CSS

#wrapper {
    width: 927px;
}
.content {
    text-align: center;
    color: #ffffff;
    background: #000000;
    border: 5px solid red;
    width: 300px;
    height: 300px;
}
@media all and (min-width: 800px) {
    #item1 {
        float: left;
    }
    #item2 {
        float: left;
    }
    #item3 {
        float: left;
    }
}
@media all and (max-width: 799px) {
    .content {
        position: absolute;
    }
    #item1 {
        top: 8px;
        left: 315px;
    }
    #item2 {
        top: 8px;
        left: 624px;
    }
    #item3 {
        float: left;
    }
}
.group:after {
    content:"";
    display: table;
    clear: both;
}

正如其他答案中所述，float无法完全控制，但使用position: absolute您可以获得更多控制权。现在你可能会遇到问题，如果你需要与像素完美的间距，特别是如果容器有文本，因为不同的浏览器会使文本略有不同，通常会将CSS关闭一个像素。

Answer 2

您需要添加断点@media以确保您需要检查

@media
{
li:nth-child(item1) { float: ....}
li:nth-child(item2) 
li:nth-child(item3) 
}

或者您也可以使用jQuery动态移动div，如下所示：

$("<li>item 1</li>").insertAfter($("classname").children()[2]);

在响应视图中重新排序HTML元素

2 个答案: