Distribuir elementos equitativos horizontalmente con CSS & Responsive

By agosto 13, 2015CSS
bsr

Si lo que andas buscando es un código CSS que distribuya una cantidad de elementos con ancho responsive equitativamente sobre una caja superior con un ancho responsive, este es el lugar indicado.

El código para realizar esto es super simple y se encuentra aquí.

 

*Los elementos UL y LI pueden ser reemplazados por los tags, clases o ID que quieras. Lo importante es que las cajas interiores a distribuir son LI y la caja superior sería UL.

HTML

<ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
</ul>

CSS

ul {
text-align: justify;
}
ul > li {
width: 28em; /* Declare your value. Can be in relative units. */
display: inline-block;
vertical-align: top;
margin-bottom: 25px;
min-height: 310px;

/* IE fix. */
*display: inline;
zoom: 1;
}
ul:after {
content: "";
width: 100%;
display: inline-block;
}