浮き彫り要素トップアライメント

Question

私は、すべての奇数要素を左に配置し、すべての偶数要素を下の画像のように配置する必要があります。

私がこれまで行っているもののためにバイオリンを確認してください。 https://jsfiddle.net/afelixj/na4fwkg7/

3番目の緑色の項目の上下に余分なスペースを削除するにはどうすればよいですか？

ここでコード

*{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; 
} 

この変更にあなたのフィドルにしてみている - 私は、https://jsfiddle.net/e5p15160/

Answer 2

それはあなたのために適していた場合、これをチェック位置aを追加しましたあなたのcssのliの中で：

<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>