浮动元素顶部对齐

Question

我需要将每个奇数元素放在左边，将每个偶数元素放在右边，如下图所示。

请检查 fiddle 以了解我到目前为止所做的事情。 https://jsfiddle.net/afelixj/na4fwkg7/

如何删除第三个绿色项上方和下方多余的 space？

这是代码

*{box-sizing:border-box;}
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
  border: 2px solid red;
  margin: 0 0 10px;
  width: 50%;
}
li:nth-child(odd){
  float: left;
  clear: left;
}
li:nth-child(even){
  border: 2px solid green;
  float: right;
  clear: right;
}

<ul>
  <li>test</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
  <li>culpa, nisi, dolore maiores aut vel cum</li>
  <li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
  <li>test</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
  <li>culpa, nisi, dolore maiores aut vel cum</li>
  <li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
  <li>test</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
  <li>culpa, nisi, dolore maiores aut vel cum</li>
  <li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
</ul>

Answer 1

尝试

li:nth-child(even){
    display: inline-block; 
}

你的 fiddle 有了这个变化 - https://jsfiddle.net/e5p15160/

Answer 2

检查这个是否适合你，我在 li 中为 css 添加了相对位置：

<ul>
<li>test</li>
<li>Lorem ipsum dolor sit amet</li>
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
<li>culpa, nisi, dolore maiores aut vel cum</li>
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
<li>test</li>
<li>Lorem ipsum dolor sit amet</li>
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
<li>culpa, nisi, dolore maiores aut vel cum</li>
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
<li>test</li>
<li>Lorem ipsum dolor sit amet</li>
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
<li>culpa, nisi, dolore maiores aut vel cum</li>
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
</ul>
<style>
*{box-sizing:border-box;}
ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
border: 2px solid red;
margin: 0 0 10px;
width: 50%;
position:relative;
}

li:nth-child(odd){
float: left;
clear: left;
}

li:nth-child(even){
border: 2px solid green;
float: right;
clear: right;
}
</style>

浮动元素顶部对齐

FLoated elements top alignment

css

floating