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


 


Tema destacado: Análisis del vídeo del hackeo al Sindicato de los Mossos de Esquadra


+  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 496 veces)
MiguelCanellas


Desconectado Desconectado

Mensajes: 530



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.242


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: 530



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.118


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: 530



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.847


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:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Ayuda] Necesito saber como resolver este problema « 1 2 3 »
Programación Visual Basic
Dreamaker 20 5,700 Último mensaje 10 Agosto 2010, 19:56
por Karcrack
No puedo resolver el problema
Programación C/C++
octavioxd 2 697 Último mensaje 23 Noviembre 2014, 21:51
por octavioxd
Problema en C que no puedo resolver.
Programación C/C++
gonezq 5 693 Último mensaje 18 Julio 2019, 16:46
por Eternal Idol
[Pregunta]: ¿Como puedo bloquear este tipo de envio?
Desarrollo Web
MiguelCanellas 2 332 Último mensaje 10 Septiembre 2019, 19:28
por MiguelCanellas
[Pregunta]: ¿COmo puedo resolver la consulta?
Bases de Datos
vegan10 0 143 Último mensaje 30 Enero 2020, 06:44
por vegan10
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines