Question

在更改网页上元素的呈现顺序的情况下，最佳做法是什么？例如，我有两个要在页面上显示的DIV：

<div id="appleSection" class="appleStyle">
    <!-- Apple DIVs, content, form elements, etc -->
</div>

<div id="orangeSection" class="orangeStyle">
    <!-- Orange DIVs, content, form elements, etc -->
</div>

根据用户选择（可能按国家/地区等），当用户更改所选国家/地区时，向用户呈现DIV的顺序可能会有所不同。某些国家/地区选择在orangeSection上方显示appleSection，对于其他选择，它们的顺序相反。

如果页面的核心逻辑是相同的，那么确定服务器端的顺序（可能是通过DIV顺序不同的两个页面）是最佳实践，还是更合适？只是一个页面并使用CSS来控制appleSection是否高于orangeSection，反之亦然？

Answer 1

选择的顺序是否必须立即更改？在用户选择国家时，是否必须更改？还是预渲染？

如果是后者，我会从服务器端进行。我会发送某种旗帜。假设您正在使用JSTL或ASP或其他东西，您可以根据标志的值控制订单。我认为做同样事情的两个页面并不是一个好主意，因为这是重要的代码重复。

如果必须根据用户交互进行更改，我会使用jQuery和相应的CSS（根据用户输入使用jQuery更改类）。

Answer 2

纯CSS不能（很好）。唯一的方法是使用position: absolute;并通过像素坐标将元素粘贴到您想要的位置。但是为了让它显示出来，你需要预先知道元素高度或使内容可滚动。

另一种客户端方式是使用JavaScript，但这可能导致“wtf？”当用户在页面加载期间看到元素立即交换/移动/调整大小时，最终用户的体验。也不是很好，也不是真正不引人注目的（如果客户端已禁用JS，则无法正常工作）。

最好的方法是使用一些条件语句在服务器端视图技术中执行此操作。

Answer 3

这是一种可能的解决方案（取决于您希望如何显示各个部分）。

<div id="fruitstand" class="apples-first">
    <div id="apples"></div>
    <div id="oranges"></div>
</div>

并在CSS中：

#fruitstand.apples-first #apples {
    float: left;
}
#fruitstand.oranges-first #oranges {
    float: left;
}

通过HTML或CSS呈现订单

3 个答案: