通过HTML或CSS渲染订单

在更改网页上元素的渲染顺序的情况下，最佳做法是什么。例如，我有一个页面上显示两个div是：通过HTML或CSS渲染订单

<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以上的苹果部分，而对于其他选择，它们的顺序相反。

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

来源

2010-03-20 Bullines

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

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

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

来源

2010-03-20 17:44:37

这不是纯粹的CSS。唯一的办法是使用position: absolute;并通过像素坐标将元素粘贴在那里。但要让它显示得很好，您需要事先知道元素高度或使内容可滚动。

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

最好的方法确实是在服务器端视图技术中使用一些条件语句来做到这一点。

来源

2010-03-20 17:51:06 BalusC

呀，你将不得不动态地改变它，只是更容易的方式。 – Kevin 2010-03-21 01:01:58

下面是一个可能的解决方案（这取决于你想如何显示你的部分）。

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

来源

2010-03-21 00:58:30

通过HTML或CSS渲染订单

回答

相关问题