Как к CSS два списка столбцов объектов?

Одним из ваших критериев является чтение списка вниз, поэтому простое решение - это таблица из двух столбцов (@Aaron Digulla), с первой половиной вашего списка в первом столбце и т. Д. Вы можете использовать любой HTML, верно? Мы прибегали к этому методу для некоторых наших списков, поскольку не хотели редактировать CSS каждый раз при изменении списка (и не хотели забывать редактировать классы в HTML).

Метод 1 в статья ALA была бы вторым самым простым решением (и более идеальным с точки зрения пуристов). Поскольку вы знаете текущий номер элемента и их количество, вы можете добавить некоторую логику для получения элементов списка в правильном порядке.

CSS может легко стилизовать любой метод.

CSS не может этого сделать. Вам необходимо собрать список на сервере и распределить элементы в двух столбцах таблицы (вы можете использовать CSS, чтобы сделать два столбца одинаковой ширины).

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

[РЕДАКТИРОВАТЬ] Мне известно о статье на alistapart , но я не вижу разницы в своем решении: предлагаемая многоколоночная компоновка дает каждому элементу фиксированное положение (давая каждому элементу уникальный идентификатор CSS, а затем как-то его позиционировать). Это означает, что вам нужно сгенерировать HTML и отсортировать элементы на сервере, а затем использовать множество уловок для их размещения.

Гораздо проще использовать таблицу с двумя столбцами и помещать в них элементы во время визуализации.

Если вы можете разделить список с помощью небольшого javascript ( в чем я не разбираюсь), тогда это должно сработать:

<script type="text/javascript">
var i=0;
var n=4;
if (i==0)
  {
document.write("<div id='listFlow'><ul>");
}
for (i=1;i<=15;i++)
{
if (i==n)
  {
document.write("<li>The number is " + i + "</li>" +"</ul><ul>");
var n=n+4;
  continue;
  }
document.write("<li>The number is " + i + "</li>");
}
document.write("</ul></div>");
</script>

<style type="text/css">
#listFlow ul{
float:left;
width:200px;
margin:0 0 0 10px;
padding:0;
}

#listFlow ul li{
list-style-position:inside;
list-style-type:disc;
margin:0;
padding:0;
width:180px;
}
</style>

Примечание: пожалуйста, смотрите CSS, а НЕ javascript. Это просто, чтобы показать, как списки могут располагаться, как описано.

Я знаю, что люди отвергают макеты на основе таблиц HTML, но какого черта? Они работают. Если вы тщеславны, вы можете сделать все возможное и найти способ сделать это на чистом CSS. : -)

Итак, вот решение XSLT.

<xml>
  <item id="1">Item 1</item>
  <item id="2">Item 2</item>
  <item id="3">Item 3</item>
  <item id="4">Item 4</item>
  <item id="5">Item 5</item>
  <item id="6">Item 6</item>
  <item id="7">Item 7</item>
  <item id="8">Item 8</item>
  <item id="9">Item 9</item>
</xml>

При применении этого шаблона XSL 1.0 (количество столбцов можно даже настроить):

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html" indent="yes" omit-xml-declaration="yes" />

  <xsl:template match="/xml">
    <xsl:variable name="vCols"  select="2" />
    <xsl:variable name="vCount" select="count(item)" />
    <xsl:variable name="vRows"  select="ceiling($vCount div $vCols)" />
    <xsl:variable name="vIterC" select="item[position() &lt;= $vCols]" />
    <xsl:variable name="vIterR" select="item[position() &lt;= $vRows]" />
    <xsl:variable name="vSelf"  select="." />

    <table>
      <xsl:for-each select="$vIterR">
        <xsl:variable name="vRowIdx" select="position()" />
        <tr>
          <xsl:for-each select="$vIterC">
            <xsl:variable name="vOffset" select="$vRows * (position() - 1)" />
            <td>
              <xsl:value-of select="$vSelf/item[$vRowIdx + $vOffset]" />
            </td>
          </xsl:for-each>
        </tr>
      </xsl:for-each>
    </table>
  </xsl:template>

</xsl:stylesheet>

Выводит:

<table>
  <tr>
    <td>Item 1</td>
    <td>Item 6</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Item 7</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 8</td>
  </tr>
  <tr>
    <td>Item 4</td>
    <td>Item 9</td>
  </tr>
  <tr>
    <td>Item 5</td>
    <td></td>
  </tr>
</table>

Если есть только один элемент, он производит :

<table>
  <tr>
    <td>Item 1</td>
  </tr>
</table>

Итак, в этой ситуации нет двух столбцов.

В любом случае таблица всегда будет правильно сформирована (например, без зубчатых строк). Единственное, чего не делает это решение, - это сортировка вывода. Вывод всегда будет в порядке документа. Кажется, вы правильно отсортировали предметы,