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 🙂
De esta manera busco que sea el resultado 🙁
Mi Html
Mi Css
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 🙂
De esta manera busco que sea el resultado 🙁
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}
