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

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 来代替 float 。

ul {
  width: 300px;
}    

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

请看这个 fiddle : https://jsfiddle.net/wwzrbhno/4/