FLoated Elemente obere Ausrichtung

Question

Ich muss jedes ungerade Element auf der linken Seite und alle geraden Elemente auf der rechten Seite wie das Bild unten platzieren.

Bitte überprüfen Sie die Geige für das, was ich bisher getan haben. https://jsfiddle.net/afelixj/na4fwkg7/

Wie kann ich den zusätzlichen Platz über und unter dem dritten grünen Element entfernen? Hier

ist der Code

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

Versuchen

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

Ihre Geige mit dieser Änderung - https://jsfiddle.net/e5p15160/

Answer 2

Prüfen Sie dies, wenn es geeignet ist für dich, ich Position hinzugefügt a s relativ in li für 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>