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

 

 


Tema destacado: Estamos en la red social de Mastodon


+  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 3,670 veces)
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
[Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« en: 26 Mayo 2020, 23:50 pm »
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 pm por MiguelCanellas » En línea
Serapis
Colaborador
***
Desconectado Desconectado

Mensajes: 3.391


Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #1 en: 27 Mayo 2020, 00:19 am »
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
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #2 en: 27 Mayo 2020, 00:38 am »
Cita de: NEBIRE en 27 Mayo 2020, 00:19 am
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
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.176



Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #3 en: 27 Mayo 2020, 02:04 am »
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 am por EdePC » En línea
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?
« Respuesta #4 en: 27 Mayo 2020, 19:26 pm »
Gracias Ede!
En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


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 pm »
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 9,456 Último mensaje 10 Agosto 2010, 19:56 pm
por Karcrack
[Pregunta]: ¿Como puedo bloquear este tipo de envio?
Desarrollo Web 		Leguim 2 1,911 Último mensaje 10 Septiembre 2019, 19:28 pm
por Leguim
[Pregunta]: ¿COmo puedo resolver la consulta?
Bases de Datos 		vegan10 0 1,664 Último mensaje 30 Enero 2020, 06:44 am
por vegan10
[Pregunta]: ¿Por qué y cómo puedo resolver esto?
Desarrollo Web 		Leguim 4 3,677 Último mensaje 23 Julio 2020, 19:55 pm
por MinusFour
No se como resolver este problema alguien me ayuda
Programación C/C++ 		Doragon 1 2,388 Último mensaje 3 Octubre 2022, 20:35 pm
por RicRed
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines