CODEWITHSUNDEEP
csslayouthtml
Alasdair McLeay
Alasdair McLeay

Reputation: 2632

Table style layout with alternating reversed rows and without markup for rows

I'm trying to achieve the following layout with CSS, each number being a block of content of equal width:

Mobile view:

1
2
3
4
5
6
7
8

Desktop view:

1 | 2
-----
4 | 3
-----
5 | 6
-----
8 | 7

Note that 3-4 and 7-8 are reversed in desktop layout.

As 3-4 and 7-8 aren't semantically linked, I'd rather not couple them together with a parent HTML element (so display:table layout is likely not an option).

In desktop view, element 1 needs to be the same height as element 2, and 3 the same as 4 etc, but the height is not known in advance and I don't want to use JavaScript (so floats are out as they would be different heights, unless there was a way of using CSS calc).

So, assuming 1-8 are all section elements from the same parent div, how could this be achieved without JavaScript?

I'm not sure there is a solution but think this is something CSS should be able to support - so answers can include draft or largely unsupported CSS.

Upvotes: 1

Views: 542

Answers (3)

Alasdair McLeay
Alasdair McLeay

Reputation: 2632

As per cimmanon's answer, and my subsequent comments, I was able to use a combination of flexbox, wrapping and relative positioning.

CSS: 

ul {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

li {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
  outline: 1px solid red;
  width: 50%;
}

li:nth-child(4n) {
  position: relative;
  left: -50%;
}

li:nth-child(4n-1) {
  position: relative;
  left: 50%;
}

HTML:

<ul>
  <li>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>2</li>
  <li>3</li>
  <li>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>5</li>
  <li>6</li>
  <li>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>8</li>
</ul>

http://codepen.io/penx/pen/fnrJE

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

Flexbox could do this, but it requires knowing in advance exactly how many elements there are.

http://codepen.io/cimmanon/pen/EDzGt

ul {
  width: 5em;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) { /* hide from experimental Firefox */
  ul {
    display: flex;
  }
}

li {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
}

li:nth-child(3),
li:nth-child(5),
li:nth-child(6) {
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

li:nth-child(4) {
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

li:nth-child(7) {
  -ms-flex-order: 4;
  -webkit-order: 4;
  order: 4;
}

li:nth-child(8) {
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}

Be aware that this will only work in browsers that support Flexbox and wrapping. Current browser support: Chrome, Opera, IE10, Blackberry 10 (Firefox will have it soon).

http://caniuse.com/#search=flexbox

Upvotes: 1

Chanckjh
Chanckjh

Reputation: 2597

float 3, 4, 7 and 8 right like here: http://jsfiddle.net/KH584/

.three, .four, .seven, .eight{
    float:right;
}

Upvotes: 1

Related Questions