Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/07/2019, 15:44
Speedbit
 
Fecha de Ingreso: marzo-2010
Mensajes: 63
Antigüedad: 14 años
Puntos: 4
DIVS contenedores con ancho excesivo... por qué tanto?

Hola a todos,

Tengo el siguiente CSS armado...

Código CSS:
Ver original
  1. .icons-container {
  2.             display: flex;
  3.             justify-content: space-between;
  4.             align-items: center;
  5.             width: 100%;
  6.             height: 70px;
  7.             margin: 40px auto;
  8.             padding: 10px 40px;
  9.             box-sizing: border-box;
  10.             border-radius: 10px;
  11.             background-color: rgba(255,255,255,0.35);
  12.             }
  13.         .icon-box {
  14.             display: inline;
  15.             }
  16.         .icon-box img {
  17.             float: left;
  18.             width: 60px;
  19.             height: 44px;
  20.             margin-right: 12px;
  21.             }
  22.         .icon-box h1 {
  23.             float: left;
  24.             font-family: roboto;
  25.             font-weight: 700;
  26.             font-size: 15px;
  27.             color: #222;
  28.             }
  29.         .icon-box h2 {
  30.             float: left;
  31.             font-family: roboto;
  32.             font-weight: 400;
  33.             font-size: 14px;
  34.             color: #222;
  35.             margin-top: -12px;
  36.             }

para el siguiente HTML...

Código HTML:
Ver original
  1. <div class="icons-container">
  2.  
  3.         <div id="icon-1" class="icon-box">
  4.             <img src="images/icon-1.png">
  5.             <h1>TITULO 1</h1>
  6.             <h2>Subtítulo 1</h2>
  7.         </div>
  8.                
  9.         <div id="icon-2" class="icon-box">
  10.             <img src="images/icon-2.png">
  11.             <h1>TITULO 2</h1>
  12.             <h2>Subtitulo 2</h2>
  13.         </div>
  14.        
  15.         <div id="icon-3" class="icon-box">
  16.             <img src="images/icon-3.png">
  17.             <h1>TITULO 3</h1>
  18.             <h2>Subtitulo 3</h2>
  19.         </div>
  20.        
  21.         <div id="icon-4" class="icon-box">
  22.             <img src="images/icon-4.png">
  23.             <h1>TITULO 4</h1>
  24.             <h2>Subtitulo 4</h2>
  25.         </div>
  26.  
  27.     </div>

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!?