-1

我一直在使用设计师的桌面与移动组件时遇到的一件事是对 HTML 元素进行重新排序。我的页面必须跨越所有断点，因此当浏览器调整大小时文本会换行/扩展（因此所有内容的高度总是可变的）。

以下是一些场景：（管道代表浮点数或列）

桌面：

项目 1 | 第 2 项 第 3 项

移动的：

第 3 项 第 1 项 第 2 项

桌面：

李

- 内容

移动的

李

-- 保留背景图片

-- 显示背景图像下方的 li 的内容（基本上在 LI 之外），并带有白色背景

使用流体布局跨各种断点重新排序 HTML 元素的最佳方式（如果有的话）是什么？似乎使用 JavaScript 来监听窗口调整大小是多余的，当必须重新排列多个元素时，绝对定位不起作用。

如果有人知道解决方案，如果您可以将其发布在 JSFiddle 上，那就太好了。

4

2 回答 2

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 偏离单个像素。

于 2013-07-12T13:35:53.493 回答
0

您肯定需要添加断点@media，而且您需要检查

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

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

$("<li>item 1</li>").insertAfter($("classname").children()[2]);
于 2013-07-12T13:18:36.607 回答