G
GustavoVM
Préstamo impago
Delta
Diseñador
Verificación en dos pasos activada
Usuário com poucas negociações! Use sempre o saldo do 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}
