Potřebuji, aby se mi elementy zalamovaly pod sebe – CSS – Fórum – Programujte.com

Ahoj, potřebuji, aby se mi na weby elementy <li>, které mám v <ul> zalamovaly pod sebe a ne aby roztahovaly dále šířku stránky, nebo se sami zmenšovali.

.abc{
    display: table;
    border-spacing: 0.313em;
    width: 100%;
    max-width: 1140px;
}

.abc ul {
   display: table-row;
   float: left;   
}
.abc ul li {
    display: table-cell;
    width: 15.4912%;
    height: 14.938em;
}


HTML 

<div class="abc">
        <ul>
          <li>
            OBSAH
          </li>
          <li>
           OBSAH
          </li>
  ...
   </ul>
</div>

Jednotlivé li mám nastylované jako rámeček, takže když zmenším šířku prohlížeče, tak chci aby se mi hodily pod sebe, zkoušel jsem u .abc ul li nastavit min-width, ale to nepomohlo, pořád se stránka roztahuje.

pomocí media query to zatím řešit nechci, protože vím, že by to mělo jít i bez nich.

vyhoď display: table-cell; a display: table-row; a mělo by se to pod sebe zalamovat

#2 crazy
Já bych ale chtěl, aby těch bloků bylo třeba 6 vedle sebe a když se stránka zúží, tak aby třeba 3 odskočily. Ne je mít všechny pod sebou jednotlivě.

#3 Marek

1. Zabal všechny elementy li do jedné třídy, kterou připiš k ul 

2. Nastav této třídě vlastnost clear a width

<ul class="obal">

.obal {
	max-width: 1200px;
	min-width: 200px;
        clear: both;
}

3. Všem dědicům tagu ul (všechny li) nastav šířku dělitelnou 2 beze zbytku

.abc ul li {
	width: 200px;
        /* float: left; */
}

Můžeš použít i ten float.