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个相同的for循环 - 也不想将其他逻辑移到其他地方
我想制作一个'iphone'友好版本，我认为这样会更容易。

Answer 1

你不能准确地用CSS要求你。但你可以做.women {float：left} .men {float：right}，这可能差不多。

这是对你的基本问题的一种创可贴，但是，无法将你的表现逻辑与你的控制逻辑分开。你的表示逻辑中没有两个相同的for循环，你应该在它之外有一个for循环来构建两个数组，然后你的表示逻辑应该使用每个实际上对它有益的方式。

Answer 2

CSS它是一种用于描述（现有）内容呈现的语言。你是要求programaticaly重复或复制其中一些内容。

您可以使用ASP / PHP无论选择哪种语言来生成该内容的多个副本，或者使用javascript来复制 - 移动 - 更改它。

实际上javascript似乎适合你的场景。

编辑：您在此处遇到类似的问题：using css to duplicate html elements

Answer 3

有趣的是（但是，此时，完全没用），这不仅可以在CSS3高级布局模块（又名模板布局）的当前草案中使用，而且规范包含示例showing how to do exactly that（最后一个示例）在第3.4节）。所以，如果你能忍受等待十五年左右......

如何根据css类将项目放在不同的（已存在的）列中？

3 个答案: