Hola a todos,
Tengo el siguiente CSS armado...
Código CSS:
Ver original.icons-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 70px;
margin: 40px auto;
padding: 10px 40px;
box-sizing: border-box;
border-radius: 10px;
background-color: rgba(255,255,255,0.35);
}
.icon-box {
display: inline;
}
.icon-box img {
float: left;
width: 60px;
height: 44px;
margin-right: 12px;
}
.icon-box h1 {
float: left;
font-family: roboto;
font-weight: 700;
font-size: 15px;
color: #222;
}
.icon-box h2 {
float: left;
font-family: roboto;
font-weight: 400;
font-size: 14px;
color: #222;
margin-top: -12px;
}
para el siguiente HTML...
Código HTML:
Ver original<div class="icons-container">
<div id="icon-1" class="icon-box"> <img src="images/icon-1.png">
<div id="icon-2" class="icon-box"> <img src="images/icon-2.png">
<div id="icon-3" class="icon-box"> <img src="images/icon-3.png">
<div id="icon-4" class="icon-box"> <img src="images/icon-4.png">
No encuentro manera de hacer que los DIVS "icon-box" entiendan que no tienen que ser más anchos que su contenido... que debería quedar armado de la siguiente manera...
y por lo tanto, me resulta imposible "acomodarlos" en su contenedor (icons-container), con un justify-content: space-between!
Alguien que me ayude... antes de que me vuelva loco!?