Визуализация заказа через HTML или CSS

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 представляются пользователю, может отличаться, когдапользователь меняет свою выбранную страну.В некоторых странах выбор AppleSection представлен выше orangeSection, а для других выборов их порядок меняется на обратный.

Если основная логика страницы одинакова независимо, рекомендуется ли определять порядок на стороне сервера(возможно, на двух страницах, которые различаются по порядку в 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;
}