HTML/CSS 列表列排序答案

【问题标题】：HTML/CSS lists column sortingHTML/CSS 列表列排序
【发布时间】：2014-04-02 13:14:53
【问题描述】：

当我使用 column 函数时，我在排序 LI 标签时遇到了一点问题。默认情况下它是正常排序的，但我不得不在 CSS 中使用列，之后我的列表是这样的：

1 - 6
2 - 7
3 - 8
4 - 9
5 - 10

但我需要这样的东西：

1 - 2
3 - 4
5 - 6
7 - 8
9 - 10

这是我的代码：jsfiddle

【问题讨论】：

您要在表格中执行此操作吗？
nope :( 不幸的是我不能在我的情况下使用表格

标签： html css sorting html-lists

【解决方案1】：

我在Multiple column lists using one ul 找到了路。

我尝试使用它。这里是DEMO

下面的演示代码：

ul {
  clear: both;
  width:450px;
  margin-bottom:20px;
  overflow:hidden;
}

li {
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
  margin-right: 10%;
}

#double li { 
  width:40%;
}

【讨论】：

【解决方案2】：

JSFiddle Link

CSS

.grid_1, .grid_2 {
    margin-left : 1.00%;
    margin-right : 1.00%;
    margin-bottom : 15px !important;
    float : left;
    display : block;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
.grid_1 {
    width: 98%;
}
.grid_2 {
    width: 48%;
}
.bg {
    background-color:#ccc;
}

HTML：

<div class="grid_1 ">
    <div class="grid_2">
        <div class="grid_1 bg">1</div>
        <div class="grid_1 bg">3<br> dgdgdfgdfg<br> sdrfsdrfrter</div>
        <div class="grid_1 bg">5</div>
        <div class="grid_1 bg">7</div>
        <div class="grid_1 bg">9</div>
        <div class="grid_1 bg">11</div>
    </div>
    <div class="grid_2">
        <div class="grid_1 bg">2</div>
        <div class="grid_1 bg">4</div>
        <div class="grid_1 bg">6</div>
        <div class="grid_1 bg">8</div>
        <div class="grid_1 bg">10</div>
        <div class="grid_1 bg">12</div>
    </div>
</div>

【讨论】：

是的，但是现在3到7之间和9到12之间也有同样的问题，它也必须是动态布局
你能用
代替无序列表吗？
不幸的是我只能使用一个网格
其他一切都很完美

【解决方案3】：

您可以尝试添加float:left 并像这样定义box-sizing:border-box;

   ul {
        clear: both;
        margin: 0px auto;
        padding: 10px 0px 0 0px;
        width: 450px;
        z-index: 9; }

    ul li {
        background:#ededed;
        float:left;
    min-height:100px;
    width:50%;
-webikit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
        list-style: none;         
        margin-bottom: 10px;
        padding: 0px;

        }

Demo

【讨论】：

每个 li 都有不同的高度，所以如果我在你的脚本中删除 min-height 它会是这样的：jsfiddle :(
@user3484379 我觉得应该加上min-height才能得到最好的外观，否则你的问题很难解决，我不明白你为什么要去掉min-height。
在我的设计中我应该有动态的高度，所以为了美观，它必须有不同的高度

【解决方案4】：

这是我的代码Updated URL

    ul {
    clear: both;
    margin: 0px auto;
    padding: 10px 0px 0 0px;
    position: relative;
    width: 450px;
    z-index: 9;
    display: block;
}
ul li {
    background:#ededed;
    text-align:left;
    display: block;
    float:left;
    list-style: none;
    margin: 0 1% 0 0;
    padding: 0px;
    width:49%;
}

希望对你有帮助

【讨论】：

是的，我也尝试过同样的方法，但在 3/3 到 6 之间以及 8 到 10 之间留有空间，因为相邻列的高度不同
还有 spage 但现在在 4 到 6 之间.. 如果我附加一些行看看它会是什么样子：[jsfiddle](bit.ly/1mHjZAg) 但我需要每个 li 都在上