CODEWITHSUNDEEP
cssfloating
Felix A J
Felix A J

Reputation: 6490

FLoated elements top alignment

I need to place every odd element on left, and every even elements on right like the below image.

enter image description here

Please check the fiddle for what I have done so far. https://jsfiddle.net/afelixj/na4fwkg7/

How can I remove the extra space above and below the third green item?

Here is the 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>

Upvotes: 1

Views: 49

Answers (2)

Pritam Parashuram Thakur
Pritam Parashuram Thakur

Reputation: 133

Check this if it's suitable for you, I added position as relative in li for 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>

Upvotes: 0

t1m0n
t1m0n

Reputation: 3431

Try to

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

Your fiddle with this change - https://jsfiddle.net/e5p15160/

Upvotes: 1

Related Questions