Question

我正在尝试获得一个2列列表，以便它命令从左到右，从上到下对元素进行排序。我有以下HTML：

<ul>
    <li>
        <p>Title 1</p>
        <p>DD/MM/YY</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </li>
    <li>
        <p>Title 2</p>
        <p>DD/MM/YY</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </li>
    <li>
        <p>Title 3</p>
        <p>DD/MM/YY</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
    </li>
    <li>
        <p>Title 4</p>
        <p>DD/MM/YY</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>
</ul>

和CSS

ul {
  width: 300px;
}    

li {
  list-style: none;
  position: relative;
  width: 47%;
  padding: 0 5px 0 0;
  float: left;
}

问题是“标题3”位于“标题2”之下，而我希望它位于“标题1”之下。问题是因为Title 1元素的高度将其推向右侧。文本是可变的，所以我不想设置特定的高度。

我创建了一个JSFiddle来说明https://jsfiddle.net/wwzrbhno/

Answer 1

您可以使用display:inline-block和vertical-align:top的组合代替浮动。

ul {
  width: 300px;
}    

li {
  list-style: none;
  display: inline-block;
  width: 47%;
  padding: 0 5px 0 0;
  vertical-align:top;
}

看到这个小提琴： https://jsfiddle.net/wwzrbhno/4/

Answer 2

您可以尝试这样的事情：

ul { 
    width:300px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

这可能会让你取消li的CSS。

这是CSS3功能，但浏览器支持有限。

li元素在2列列表中的位置

2 个答案: