Как я могу разместить элементы в разных (уже существующих) столбцах на основе класса CSS?

Question

Это НЕ вопрос о том, как создавать столбцы в css - поэтому, пожалуйста, не давайте мне никаких css за это. Я только что исключил это здесь для удобства чтения.

Я создал два столбца в CSS и хочу разместить в них элементы на основе некоторого класса CSS. Я думаю, что это возможно, но я не уверен, как.

<DIV id="col1">
   <!-- I want to display everything with 'women' here -->
</DIV>

<DIV id="col2">
   <!-- I want to display everything with 'men' here -->
</DIV>

<!-- this content is dynamically generated in a loop (PHP/ASP.NET)-->
<DIV id="products">
    <DIV class="women">
       Women's product 1        
    </DIV>
    <DIV class="men">
       Men's product 1        
    </DIV>
    <DIV class="men">
       Men's product 2        
    </DIV>
</DIV>

Редактировать: Просто чтобы быть уверенным, что я не хочу дублировать список продуктов на col1 и col2. Я хочу переместить их. Мне нужна только одна видимая копия каждого предмета.

Так что у меня есть два столбца - или области на странице - что угодно - для этого не имеет значения.

Я хочу использовать css, чтобы взять все под .products.women и поместить его в столбец 1.

Я хочу использовать css, чтобы взять все под .products.men и поместить его в столбец 2.

Как я могу это сделать. Подобные вещи относятся к моему ограничению css, но я знаю, что я могу использовать некоторую сообразительность.

В настоящее время я рендерим в столбцы в двух отдельных циклах for. Я хочу уйти от этого по двум причинам:

• Я не хочу поддерживать 2 одинаковых для цикла - и не перемещать эту логику в другое место
• Я хочу сделать дружественную версию для iphone, и я думаю, это облегчит эту задачу.

Answer 1

Вы не можете сделать точно , что вы просите с помощью CSS. Но вы можете сделать .women {float: left} .men {float: right}, что может быть примерно таким же хорошим.

Это своего рода бинты по вашей фундаментальной проблеме - неспособность отделить логику представления от логики управления. Вместо того, чтобы в вашей логике представления было два одинаковых цикла for, у вас должен быть один цикл for вне него, который строит два массива, тогда ваша логика представления должна использовать каждый способ, который действительно будет полезен для него.

Answer 2

Интересно (но, на данный момент, совершенно бесполезно), это не только возможно в текущей версии CSS3 Advanced Layout Module (он же Template Layout), но в спецификации есть пример , показывающий, как делать точно что (последний пример в разделе 3.4). Так что, если вы можете ждать пятнадцать лет или около того ...

Answer 3

CSS это язык, используемый для описания представления (существующего) контента. Вы просить программно ДУБЛИРОВАТЬ или КОПИРОВАТЬ часть этого контента.

Вы можете использовать ASP / PHP на любом языке для создания нескольких копий этого контента или использовать javascript для копирования-перемещения-изменения.

На самом деле javascript, кажется, соответствует вашему сценарию.

РЕДАКТИРОВАТЬ: у вас есть похожий предыдущий вопрос здесь: с использованием CSS для дублирования элементов HTML