CODEWITHSUNDEEP
htmlcss
JonathanBristow
JonathanBristow

Reputation: 1065

HTML CSS Columns alternating content left and right

See attached image to see what I currently have.

Currently Have This Layout

I have achived this using a UL with css column-count: 2; and lis which have different heights and colours. The content of each li is a number, they are in order in the HTML.

As you can see in the attached layout, everything goes down the left and then starts a new column on the right. I would like to get the layout more like this:

Left:    Right:
1        2
3        4
5        6

etc etc

Aim: The have the same layout as in the image but ordered differently.

How can I achieve this?

UPDATE 1; Added relevant code.

<style>
#items {
     -webkit-column-count: 2;
     -moz-column-count: 2;
     column-count: 2;
}
.item p {
    padding: 20px;
    color: white;
    font-size: 22px;
}
.item-1 {
    height: 120px;
    background: pink;
}
.item-2 {
    height: 180px;
    background: red;
}
.item-3 {
    height: 210px;
    background: gray;
}
.item-4 {
    height: 160px;
    background: green;
}
.item-5 {
    height: 110px;
    background: yellow;
}
.item-6 {
    height: 240px;
    background: maroon;
}
.item-7 {
    height: 120px;
    background: blue;
}
.item-8 {
    height: 420px;
    background: lime;
}
.item-9 {
    height: 300px;
    background: teal;
}
.item-10 {
    height: 190px;
    background: olive;
}</style>

<ul id="items">
    <li class="item item-1"><p>1</p></li>
    <li class="item item-2"><p>2</p></li>
    <li class="item item-3"><p>3</p></li>
    <li class="item item-4"><p>4</p></li>
    <li class="item item-5"><p>5</p></li>
    <li class="item item-6"><p>6</p></li>
    <li class="item item-7"><p>7</p></li>
    <li class="item item-8"><p>8</p></li>
    <li class="item item-9"><p>9</p></li>
    <li class="item item-10"><p>10</p></li>
</ul>

Upvotes: 2

Views: 840

Answers (1)

hungerstar
hungerstar

Reputation: 21725

If you would like to stick to your ul could do the following. Float the li and set the width so each one takes up half the space. I should note this is if the items are of equal height. Otherwise I think your are relegated to making two columns, one for the odds and the other for the evens.

ul, li {
  margin: 0;
  padding: 0;
  }
ul {
  list-style: none;
  }
li {
  float: left;
  width: 50%;
  }
li:nth-child(1) {
  background-color: #f5f5f5;
  }
li:nth-child(4) {
  background-color: #f5f5f5;
  }
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Upvotes: 2

Related Questions