0

estoy tratando de alinear varios div dentro de uno con float. Aca dejo un ejemplo. Mi idea es colocar varios boxs no solo 3.

.cont {margin: 0 auto; width: 720px;}
.thumm {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.thumm-box {
border: 1px solid #888;
display:inline-block;
width: 220px;
padding: 17px;
}
<div class="cont">
<p style="border: 1px solid #888;">linea</p>
<div class="thumm">

<div class="thumm-box">
thumm box 1
</div>

<div class="thumm-box">
thumm box 2
</div>

<div class="thumm-box">
thumm box 3
</div>
</div>
</div>

6
  • y cuál es tu problema? los divs se están alineando bien
    – Mario L
    Commented el 6 sept. 2018 a las 1:06
  • Me falto agregar un parrafo. Con ese parrafo, se ve que no esta alineado.
    – Santiaggo
    Commented el 6 sept. 2018 a las 1:08
  • Si lo que buscas es tener todos los divs uno al lado del otro, sólo tienes que sacar la propiedad margin-right: 40px; de la clase thum-box.
    – Mario L
    Commented el 6 sept. 2018 a las 1:19
  • Si, pero como le doy espacio entre box y box?
    – Santiaggo
    Commented el 6 sept. 2018 a las 1:21
  • Puedes setear un margin más chico, de unos pocos px
    – Mario L
    Commented el 6 sept. 2018 a las 1:27

1 respuesta 1

3

Puedes setear el margin-right con un valor de 2px:

.cont {margin: 0 auto; width: 720px;}
.thumm {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.thumm-box {
border: 1px solid #888;
display:inline-block;
width: 220px;
padding: 17px;
margin-right:2px;
}
<div class="cont">
<p style="border: 1px solid #888;">linea</p>
<div class="thumm">

<div class="thumm-box">
thumm box 1
</div>

<div class="thumm-box">
thumm box 2
</div>

<div class="thumm-box">
thumm box 3
</div>
<div class="thumm-box">
thumm box 4
</div>
<div class="thumm-box">
thumm box 5
</div>
</div>
</div>

1
  • Jajajajaja.... no se me ocurrio agregar el margin.... gracias!
    – Santiaggo
    Commented el 6 sept. 2018 a las 1:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.