elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?  (Leído 608 veces)
MiguelCanellas


Desconectado Desconectado

Mensajes: 600



Ver Perfil
[Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« en: 26 Mayo 2020, 23:50 »

Básicamente tengo un problema, y los recuadros naranjas no tienen exactamente el mismo ancho, sino que el último es un poco más ancho de lo que debería ser.



El "código" html lo pueden copiar y probar en sus computadoras...

Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7.  
  8. <style type="text/css">
  9. *, *::before, *::after {
  10.        -moz-box-sizing: border-box;
  11.        -o-box-sizing: border-box;
  12.        -webkit-box-sizing: border-box;
  13.        box-sizing: border-box;
  14.        margin: 0;
  15.        padding: 0;
  16. }
  17.  
  18. html {
  19. font-family: opensans;
  20.        line-height: 1.15;
  21.        -webkit-text-size-adjust: 100%;
  22.        -ms-text-size-adjust: 100%;
  23.        -ms-overflow-style: scrollbar;
  24.        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  25. }
  26.  
  27. div {
  28.        overflow-wrap: break-word;
  29.    }
  30.  
  31.    body {
  32.        background: #fff;
  33.        color: #242424;
  34.        display: flex;
  35.        flex-direction: column;
  36.        font-family: opensans;
  37.        font-size: 1rem;
  38.        font-weight: 400;
  39.        line-height: 1.5;
  40.        margin: 0;
  41.        min-height: 100vh;
  42.        text-align: left;
  43. }
  44.  
  45. .box_content {
  46. height: auto;
  47. width: 100%;
  48. overflow: hidden;
  49. overflow-wrap: break-word;
  50. }
  51.  
  52. ul.list-horizontal {
  53. margin: 0;
  54. padding: 0;
  55. }
  56.  
  57. ul.list-horizontal li {
  58. display: block;
  59. float: left;
  60. padding: 0px;
  61. }
  62. </style>
  63.  
  64. <div class="box_content" style="background: red; height: 100px; width: 80%; margin-left: 10px; margin-top: 10px; padding: 5px;">
  65.        <ul class="list-horizontal" style="width: 100%;">
  66.            <li style="padding-right: 5px; width: 33.3333333333%;">
  67.             <div style="background: orange; height: 50px;"></div>
  68.            </li>
  69.            <li style="padding-right: 5px; width: 33.3333333333%;">
  70.             <div style="background: orange; height: 50px;"></div>
  71.            </li>
  72.            <li style="width: 33.3333333333%;">
  73.             <div style="background: orange; height: 50px;"></div>
  74.            </li>
  75.        </ul>
  76.    </div>
  77.  
  78. </body>
  79. </html>
  80.  


« Última modificación: 26 Mayo 2020, 23:51 por MiguelCanellas » En línea

NEBIRE


Desconectado Desconectado

Mensajes: 2.312


Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #1 en: 27 Mayo 2020, 00:19 »

Es el típico problema de 'postes y vallas'.

El problema básico es que hay que 'precalcular' el ancho efectivo a repartir...
Antes de indicar el reparto del 33%, debes contar los 'postes' y descontar el ancho que 'ocupan todos' del 'width', entonces ahora ese a ese 'nuevowidth' si puedes aplicarle el 33%, dará el reparto de 'valla' igual para todos (reusa el valor en vez de calcularlo cada vez), y ahora cada 'valla'  tiene un 'poste' (se desplaza la 'valla') 5px...


En línea

MiguelCanellas


Desconectado Desconectado

Mensajes: 600



Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #2 en: 27 Mayo 2020, 00:38 »

Es el típico problema de 'postes y vallas'.

El problema básico es que hay que 'precalcular' el ancho efectivo a repartir...
Antes de indicar el reparto del 33%, debes contar los 'postes' y descontar el ancho que 'ocupan todos' del 'width', entonces ahora ese a ese 'nuevowidth' si puedes aplicarle el 33%, dará el reparto de 'valla' igual para todos (reusa el valor en vez de calcularlo cada vez), y ahora cada 'valla'  tiene un 'poste' (se desplaza la 'valla') 5px...

Hola,

¿cómo podría hacer eso?
En línea

EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.334



Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #3 en: 27 Mayo 2020, 02:04 »

Saludos,

- Dependiendo del grado de manipulación sobre los Items podrías usar Table, Flex, Grid o Flex + Grid. Table sería lo más sencillo, en todos los casos lo mejor es hacer que el navegador haga el cálculo. La ventaja de Table es que lo tiene innato el espaciado entre Celdas (border-spacing) y el crecimiento equitativo de las Celdas hasta rellenar todo el espacio disponible.

Con Table
Código
  1. <style>
  2.  .tbl-container {
  3.    background-color: red;
  4.    border-spacing: 5px;
  5.    width: 100%;
  6.  }
  7.  .tbl-container td {
  8.    background-color: orange;
  9.  }
  10. </style>
  11.  
  12. <table class="tbl-container">
  13.  <tr>
  14.    <td>&nbsp;</td>
  15.    <td>&nbsp;</td>
  16.    <td>&nbsp;</td>
  17.  </tr>
  18. </table>

Con Flex
Código
  1. <style>
  2.  .ul-container {
  3.    background-color: red;
  4.    display: flex;
  5.    padding: 0;
  6.  }
  7.  .ul-container li {
  8.    background-color: orange;
  9.    flex: 1;
  10.    list-style: none;
  11.    margin: 5px 5px 5px 0px;
  12.  }
  13.  .ul-container li:first-child {
  14.    margin-left: 5px;
  15.  }
  16. </style>
  17.  
  18. <ul class="ul-container">
  19.  <li>&nbsp;</li>
  20.  <li>&nbsp;</li>
  21.  <li>&nbsp;</li>
  22. </ul>


- La ventaja de Flex es que se puede manipular cada Celda individualmente, es más complejo su uso pero dependerá de los requisitos de tu proyecto.



- Por cierto a lo que @Nebire se refiere es que tienes que calcular la medida de cada espacio que se reparte, como quieres medidas relativas a un total 100% pues haces eso, repartes todo hasta llegar a un 100%, por ejemplo consideras los márgenes que en total serán 4 (postes) y luego las 3 cajas naranjas en sí (vallas), tenemos 7 objetos que se deben repartir, entonces en mi caso reparto un 1% * 4 para los márgenes y 32% * 3 para las cajas, dando todo un 100%:

Con Float
Código
  1. <style>
  2.  .ul-container {
  3.    background-color: red;
  4.    overflow: hidden;
  5.    padding: 0;
  6.  }
  7.  .ul-container li {
  8.    background-color: orange;
  9.    float: left;
  10.    list-style: none;
  11.    margin: 1% 1% 1% 0;
  12.    width: 32%;
  13.  }
  14.  .ul-container li:first-child {
  15.    margin-left: 1%;
  16.  }
  17. </style>
  18.  
  19. <ul class="ul-container">
  20.  <li>&nbsp;</li>
  21.  <li>&nbsp;</li>
  22.  <li>&nbsp;</li>
  23. </ul>
« Última modificación: 27 Mayo 2020, 06:31 por EdePC » En línea

MiguelCanellas


Desconectado Desconectado

Mensajes: 600



Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #4 en: 27 Mayo 2020, 19:26 »

Gracias Ede!
En línea

MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.920


I'm fourth.


Ver Perfil WWW
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #5 en: 27 Mayo 2020, 21:57 »

El problema ahí no es que las celdas no tengan el mismo ancho. Esos li tienen el mismo ancho, pero as aplicado padding a los hijos de las celdas excepto al último.

S aplicaras el mismo padding al contenedor y al padre:

Código:
|---|-----------------------|-----------------------|-----------------------|---|
|   |-----------------------|-----------------------|-----------------------|   |
|   |   |               |   |   |               |   |   |               |   |   |
|   |   |               |   |   |               |   |   |               |   |   |
|2px|2px|               |2px|2px|               |2px|2px|               |2px|2px|
|   |   |               |   |   |               |   |   |               |   |   |
|   |   |               |   |   |               |   |   |               |   |   |
|   |-----------------------|-----------------------|-----------------------|   |
|---|-----------------------|-----------------------|-----------------------|---|

Hubiera la misma distancia entre cada celda y tendrían el mismo tamaño.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines