All geek questions in one place

Conditional multiple columns in CSS

I have a menu containing some submenus, like this

.menu {
  position: absolute;
  background: yellow;
  margin-top: 2em;
}
header {
  font-size: 20px;
}
ul {
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 10px;
  list-style: none;
  padding: 0;
}
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }
div:not(.main) {
  display: inline-block;
  position: relative;
}
<div>menu one
  <div class="menu">
    <header>menu one header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item tree</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>six</li>
      <li>Item 7</li>
    </ul>
  </div>
</div>
<div>menu two</div>
Run codeHide result

I need 2 columns to be displayed ONLY if the list .menu>ulcontains more than 4 entries.

Is pure CSS possible?

+4
source share
4 answers

We can do with the quantity request, only the order problem. If you agree with this order, we can use the quantity request.

ul {
    margin:0; padding:0; list-style:none;
}

li {
    width:40%;
    border:1px solid red;
    margin:2px;
}


ul li:nth-last-child(n+5), 
ul li:nth-last-child(n+5) ~ li { 
    float:left;
}

demo

+1
source

You can use the trick described here - http://alistapart.com/article/quantity-queries-for-css , which was suggested by @Jesse Kernaghan in the comments above .

, , :

  • ul
  • li , n ul. n - , 4.

, CSS columns li .

, CSS:

li:nth-last-child(4):first-child, 
li:nth-last-child(4):first-child ~ li {
  width: 160px;
}

li 4 th , li li s, 4 .

( ) li, .

li, .

:

div.menu {
  display: inline-block; vertical-align: top;
  background: yellow; margin: 2em 1em;
}
header { font-size: 20px; }
ul {
  width: 160px; -moz-columns: 2 auto; -moz-column-fill: auto;
  -webkit-columns: 2 auto; columns: 2 auto;
  list-style: none; padding: 0; height: 8em;
}
li { height: 2em; }
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }

li:nth-last-child(4):first-child, li:nth-last-child(4):first-child ~ li {
  width: 160px;
}
<div class="menu">
  <header>menu one</header>
  <ul>
    <li>Item one</li>
    <li>Item two 2</li>
    <li>Item tree</li>
    <li>Item four</li>
    <li>Item five</li>
    <li>six</li>
    <li>Item 7</li>
  </ul>
</div>
<div class="menu">
  <header>menu two</header>
  <ul>
    <li>Item one</li>
    <li>Item two 2</li>
    <li>Item tree</li>
    <li>Item four</li>
  </ul>
</div>
<div class="menu">
  <header>menu three</header>
  <ul>
    <li>Item one</li>
    <li>Item two 2</li>
    <li>Item tree</li>
    <li>Item four</li>
    <li>Item five</li>
  </ul>
</div>
Hide result
+1

, Chrome, FF, IE11 Edge, , , 8 .

li , margin-top 4 , .

, , 50% , 2 , , "" , .

.menu {
  position: absolute;
  background: yellow;
  margin-top: 2em;
}
header {
  font-size: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }

li { position: relative; height: 20px; }
li:nth-child(-n+4) { float: left; width: 48%; margin-right: 3%; }
li:nth-child(n+5) { float: right; width: 48%; margin-left: 3%; top: -80px }

li:nth-last-child(4):first-child, li:nth-last-child(4):first-child ~ li {
  width: 94%; margin-right: 6%
}

div:not(.main) {
  display: inline-block;
  position: relative;
}
<div>menu one
  <div class="menu">
    <header>menu one header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item tree</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>six</li>
      <li>Item 7</li>
    </ul>
  </div>
</div>
<div>menu two
  <div class="menu">
    <header>menu two header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item tree</li>
      <li>Item four</li>
    </ul>
  </div>
</div>
Hide result

. : flex.

li ul height n .

.menu {
  position: absolute;
  background: yellow;
  margin-top: 2em;
}
header {
  font-size: 20px;
}
ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
}

li {
  height: 22px;
}

li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }

div:not(.main) {
  display: inline-block;
  position: relative;
}
<div>menu one
  <div class="menu">
    <header>menu one header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item tree</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>six</li>
      <li>Item 7</li>
    </ul>
  </div>
</div>
<div>menu two
  <div class="menu">
    <header>menu two header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item tree</li>
      <li>Item four</li>
    </ul>
  </div>
</div>
<div>menu three
  <div class="menu">
    <header>menu three header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item tree</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
      <li>Item seven</li>
      <li>Item eight</li>
      <li>Item nine</li>
      <li>Item ten</li>
    </ul>
  </div>
</div>
Hide result
+1

, "" ( - ), , , ...

ul column-span: all, li "", , li, (nth-last-child(n + 5)), .
Buuut... Firefox ( ).

.menu {
  position: absolute;
  background: yellow;
  margin-top: 2em;
}
header {
  font-size: 20px;
}
ul {
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 10px;
  list-style: none;
  padding: 0;
}
li:nth-child(odd) {background: lightblue; }
li:nth-child(even) {background: lightyellow; }
div:not(.main) {
  display: inline-block;
  position: relative;
}
li {
  -webkit-column-span: all;
  column-span: all;
}
li:nth-last-child(n + 5), li:nth-last-child(n + 5) ~ li {
  -webkit-column-span: none;
  column-span: none;
}
<div>menu one
  <div class="menu">
    <header>menu one header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item t(h)ree</li>
      <li>Item four</li>
    </ul>
  </div>
</div><div>menu two
  <div class="menu">
    <header>menu two header</header>
    <ul>
      <li>Item one</li>
      <li>Item two 2</li>
      <li>Item t(h)ree</li>
      <li>Item four</li>
      <li>Item five</li>
    </ul>
  </div>
</div>
Hide result

, - .

, flexbox, .

0

Source: https://habr.com/ru/post/1609008/

More articles:


All Articles