Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] DIVS contenedores con ancho excesivo... por qué tanto?

Estas en el tema de DIVS contenedores con ancho excesivo... por qué tanto? en el foro de CSS en Foros del Web. Hola a todos, Tengo el siguiente CSS armado... @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original .icons-container {             display : flex ...
  #1 (permalink)  
Antiguo 10/07/2019, 15:44
 
Fecha de Ingreso: marzo-2010
Mensajes: 63
Antigüedad: 9 años, 7 meses
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!?
  #2 (permalink)  
Antiguo 11/07/2019, 13:20
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.957
Antigüedad: 11 años, 2 meses
Puntos: 2184
Respuesta: DIVS contenedores con ancho excesivo... por qué tanto?

icons-container tiene padding lateral de 40px, probaste a modificarlo?
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 11/07/2019, 15:01
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.420
Antigüedad: 17 años, 4 meses
Puntos: 175
Respuesta: DIVS contenedores con ancho excesivo... por qué tanto?

proba esto:

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.             box-sizing: border-box;
  9.             border-radius: 10px;
  10.             background-color: rgba(255,255,255,0.35);
  11. }
  12. .icon-box {
  13.     padding:0 40px;
  14.     margin: 0 5px;
  15.     display:flex;
  16.     align-items: center;
  17.     justify-content: center;
  18.    
  19. }
  20. .icon-box img {
  21.             width: 60px;
  22.             height: 44px;
  23.             margin-right: 12px;
  24. }
  25. .icon-box h1 {
  26.             font-family: roboto;
  27.             font-weight: 700;
  28.             font-size: 15px;
  29.             color: #222;
  30. }
  31. .icon-box h2 {
  32.             font-family: roboto;
  33.             font-weight: 400;
  34.             font-size: 14px;
  35.             color: #222;
  36.             margin-top: -12px;
  37. }

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.             <div class="txt">
  6.                 <h1>TITULO 1</h1>
  7.                 <h2>Subtítulo 1</h2>
  8.             </div>
  9.         </div>
  10.         ....
  11. </div>

Slds
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #4 (permalink)  
Antiguo 12/07/2019, 09:13
 
Fecha de Ingreso: marzo-2010
Mensajes: 63
Antigüedad: 9 años, 7 meses
Puntos: 4
Respuesta: DIVS contenedores con ancho excesivo... por qué tanto?

Cita:
Iniciado por DragonX Ver Mensaje
proba esto:

Código CSS:
Ver original
  1. ...

Slds


IMPECABLE! (al menos en Chrome) sólo quité el padding para cada "icon-box" y restablecí el padding horizontal para "icons-container"... el "space-between"se encargó de eso perfectamente!



En Chrome va como lanza!! En otros, todo roto... pero es OTRO TEMA, porque mi código (mis conocimientos) se está chocando contra el cross-browser MAL!
Imagino que en tanto vaya pudiendo acomodar el resto... esto también se verá bien!

MIL GRACIAS!


Última edición por Speedbit; 12/07/2019 a las 09:20
  #5 (permalink)  
Antiguo 12/07/2019, 09:25
 
Fecha de Ingreso: marzo-2010
Mensajes: 63
Antigüedad: 9 años, 7 meses
Puntos: 4
Respuesta: DIVS contenedores con ancho excesivo... por qué tanto?

Cita:
Iniciado por Triby Ver Mensaje
icons-container tiene padding lateral de 40px, probaste a modificarlo?
Si, lo había probado... reemplazando el "space-between" por "space-around" en justify-content para icons-container... pero tampoco daba!

El problema era justamente, que los DIVS para el texto, asumían un ancho excesivo... y al justificarlos (del modo que fuera), las cuentas le daban cualquiera al navegador!

Fijate que lo propuesto por DragonX, anduvo perfecto!!

Gracias por tu aporte!



La zona horaria es GMT -6. Ahora son las 19:43.