Como ordenar bloques de div con css?

  • Autor Autor GustavoVM
  • Fecha de inicio Fecha de inicio
G

GustavoVM

Préstamo
Diseñador
No recomendado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola
agradezco la ayuda que me puedan brindar, recién estoy aprendiendo de a poco sobre HTML y css
lo que sucede es que estoy creando unas cajas (9) donde cada una de ellas trae una lista (algunas cortas y otras largas), donde quisiera que se visualice en 4 columnas por ello a dicha caja le asigne un ancho width: 25%;

el problema viene a partir de la 5ta caja, que pensé que se acomodarían/pegarían hacia la izquierda (tal como lo quisiera según la 2da imagen), como es posible hacer eso, algún atributo?

podría crear unos divs y ahí recién asignarle width: 25%; y dentro de ese div meter mis cajas (a algunas divs ponerle 2 cajas, al otro 4, etc) y acomodarlo manualmente pero habrá alguna manera de hacerlo como le muestra mi código que lo dejo a continuación.

Muchas gracias 🙂

NSY1alY.jpg


De esta manera busco que sea el resultado 🙁
KRooFCU.jpg


Mi Html
HTML: 
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="container">


		<div class="box a">
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>
					Inmobiliaria 0<br>
					Instalación/Mantenimiento 0<br>
					Labor general 0<br>
		</div>

		<div class="box b">
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>
					Inmobiliaria 0<br>
					Instalación/Mantenimiento 0<br>
					Labor general 0<br>
					Legal/Consultoria 0<br>
					Limpieza 0<br>
					Manager 0<br>
		</div>

		<div class="box c">
					Arte/Cultura 3<br>
					Atención al cliente 0<br>
					Bartenders/Meseros 0<br>
					Belleza y moda 0<br>
					Carpintero 0<br>
					Chofer 0<br>
					Construcción 0<br>
					Contabilidad 1<br>
					Cuidar niños 0<br>
					Delivery 0<br>
					Dirección/Ejecutivos 0<br>
					Educación 0<br>
					Electricista 0<br>
					Finanzas 0<br>
					Gerencia/Ejecutivos 0<br>
					Home attendant 0<br>
					Industria 0<br>
		</div>

		<div class="box d">
					Dirección/Ejecutivos 0<br>
					Educación 0<br>
					Electricista 0<br>
					Finanzas 0<br>
					Gerencia/Ejecutivos 0<br>
					Home attendant 0<br>
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>
		</div>


		<div class="box e">
					Dirección/Ejecutivos 0<br>
					Educación 0<br>
					Electricista 0<br>
					Finanzas 0<br>
					Gerencia/Ejecutivos 0<br>
					Home attendant 0<br>
					Salud/medico 0<br>
					Seguridad 0<br>
					Software/informática 0 <br>
					Spa/Gimnasio 0<br>
		</div>

		<div class="box f">
					Dirección/Ejecutivos 0<br>
					Educación 0<br>
					Electricista 0<br>
					Finanzas 0<br>
					Gerencia/Ejecutivos 0<br>
					Home attendant 0<br>
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>
					Inmobiliaria 0<br>
					Instalación/Mantenimiento 0<br>
					Labor general 0<br>
					Legal/Consultoria 0<br>
					Limpieza 0<br>
					Manager 0<br>
					Oficina 0<br>
					Ong 0<br>
					Otros trabajos 0<br>
					Plomero 0<br>
					Publicidad/Marketing 0<br>
					Recursos Humanos 0<br>
					Restaurante 0<br>
					Salud/medico 0<br>
					Seguridad 0<br>
					Software/informática 0 <br>
					Spa/Gimnasio 0<br>
		</div>



		<div class="box g">
					Dirección/Ejecutivos 0<br>
					Educación 0<br>
					Electricista 0<br>
					Finanzas 0<br>
					Gerencia/Ejecutivos 0<br>
					Home attendant 0<br>
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>

		</div>



		<div class="box h">
					Dirección/Ejecutivos 0<br>
					Educación 0<br>
					Electricista 0<br>
					Finanzas 0<br>
					Gerencia/Ejecutivos 0<br>
					Home attendant 0<br>
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>

		</div>




		<div class="box i">
					Dirección/Ejecutivos 0<br>
					Educación 0<br>
					Electricista 0<br>
					Finanzas 0<br>
					Gerencia/Ejecutivos 0<br>
					Home attendant 0<br>
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>
					Home attendant 0<br>
					Industria 0<br>
					Informática/Tecnología 0<br>
					Ingenieros/técnicos 0<br>
		</div>


</div>



</body>
</html>



Mi Css
HTML: 
body {
    background: #ececec;
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-size: 13px;
    color:#314559;
    margin:0 auto;
    padding:auto;
    overflow-x: hidden; }

.container {
    width: 100%;
    max-width:1100px;
    margin:0 auto;  box-sizing: border-box;
    padding: 0 4px;}

.box {
    position: relative;
    float: left;
    width: 25%; box-sizing: border-box;
    color: #fff;
    padding: 10px 20px;
    margin: 4px 0; }

.a {background: #e9c008}
.b {background: #71b4b2}
.c {background: #a35dba}
.d {background: #3fa4cf}

.e {background: #e47b1e}
.f {background: #da6ba2}
.g {background: #ce4141}
.h {background: #51b244}

.i {background: #3457a2}
 
Yo lo haría asi:

HTML: 
<div class="box">
<div class="a">cuadro amarillo</div>
<div class="">cuadro naranja</div>
<div class="">cuadro azul rey</div>
</div>

<div class="box">
<div class="">cuadro gris</div>
<div class="">cuadro rosa</div>
</div>

<div class="box">
<div class="">cuadro morado</div>
<div class="">cuadro rojo</div>
</div>

<div class="box">
<div class="">cuadro turquesa</div>
<div class="">cuadro verde</div>
</div>

Y al .box le agregaría vertical-align:top;
Recuerda agregar las clases de cada div. Yo no se las agregué porque eran muchas hehe. Espero que tengas una diea con esto. Saludos 🙂
 
Tal como lo dice el compañero de arriba debes de hacerlo. Como vez, lo que estas armando son tres columnas, y en cada columna un numero diferente de cajas.
 
belial9826 dijo:
Tal como lo dice el compañero de arriba debes de hacerlo. Como vez, lo que estas armando son tres columnas, y en cada columna un numero diferente de cajas.
Hacer clic para expandir...

si, justo eso pensaba como alternativa,
pero crei que también había alguna manera de hacerlo sin crear columnas, sino solo darle width: %; y las demás se acomoden de izquierda a derecha...
lo que pasa que a futuro se agregaran mas y mas bloques y se tendría que tocar y acomodarlo manualmente para que estén parejos :neglected:
 
Puedes mirar las propiedades odd y even, o también la propiedad nth-child... Pero seria mas tedioso.

GustavoVM dijo:
si, justo eso pensaba como alternativa,
pero crei que también había alguna manera de hacerlo sin crear columnas, sino solo darle width: %; y las demás se acomoden de izquierda a derecha...
lo que pasa que a futuro se agregaran mas y mas bloques y se tendría que tocar y acomodarlo manualmente para que estén parejos :neglected:
Hacer clic para expandir...
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

U
  • Cerrado
Cómo centrar el contenido de un <div> con CSS
Respuestas
8
Visitas
540
sabogal
sabogal
Edrien
  • Cerrado
Persona que acomode div con css
Respuestas
1
Visitas
136
Blacksnow
Blacksnow
K
Posiciones de DIV: Cómo mover la PUBLICIDAD debajo de BUSCAR en HTML y CSS
Respuestas
10
Visitas
758
Kratz
K
W
Cómo ordenar los iconos sociales horizontalmente usando CSS
Respuestas
0
Visitas
2K
Willy
W
Atrás
Arriba