[Pregunta]: ¿Cómo puedo resolver este problema con mi diseño?

Iniciado por Leguim, 26 Mayo 2020, 23:50 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Leguim

26 Mayo 2020, 23:50 PM Ultima modificación: 26 Mayo 2020, 23:51 PM por MiguelCanellas
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 (html) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<style type="text/css">
*, *::before, *::after {
       -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       margin: 0;
       padding: 0;
}

html {
font-family: opensans;
       line-height: 1.15;
       -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
       -ms-overflow-style: scrollbar;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

div {
       overflow-wrap: break-word;
   }
   
   body {
       background: #fff;
       color: #242424;
       display: flex;
       flex-direction: column;
       font-family: opensans;
       font-size: 1rem;
       font-weight: 400;
       line-height: 1.5;
       margin: 0;
       min-height: 100vh;
       text-align: left;
}

.box_content {
height: auto;
width: 100%;
overflow: hidden;
overflow-wrap: break-word;
}

ul.list-horizontal {
margin: 0;
padding: 0;
}

ul.list-horizontal li {
display: block;
float: left;
padding: 0px;
}
</style>

<div class="box_content" style="background: red; height: 100px; width: 80%; margin-left: 10px; margin-top: 10px; padding: 5px;">
       <ul class="list-horizontal" style="width: 100%;">
           <li style="padding-right: 5px; width: 33.3333333333%;">
            <div style="background: orange; height: 50px;"></div>
           </li>
           <li style="padding-right: 5px; width: 33.3333333333%;">
            <div style="background: orange; height: 50px;"></div>
           </li>
           <li style="width: 33.3333333333%;">
            <div style="background: orange; height: 50px;"></div>
           </li>
       </ul>
   </div>

</body>
</html>

Serapis

#1
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...

Leguim

#2
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?

EdePC

#3
27 Mayo 2020, 02:04 AM Ultima modificación: 27 Mayo 2020, 06:31 AM por EdePC
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 (css) [Seleccionar]
<style>
 .tbl-container {
   background-color: red;
   border-spacing: 5px;
   width: 100%;
 }
 .tbl-container td {
   background-color: orange;
 }
</style>

<table class="tbl-container">
 <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
 </tr>
</table>

Con Flex
Código (css) [Seleccionar]
<style>
 .ul-container {
   background-color: red;
   display: flex;
   padding: 0;
 }
 .ul-container li {
   background-color: orange;
   flex: 1;
   list-style: none;
   margin: 5px 5px 5px 0px;
 }
 .ul-container li:first-child {
   margin-left: 5px;
 }
</style>

<ul class="ul-container">
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
</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 (css) [Seleccionar]
<style>
 .ul-container {
   background-color: red;
   overflow: hidden;
   padding: 0;
 }
 .ul-container li {
   background-color: orange;
   float: left;
   list-style: none;
   margin: 1% 1% 1% 0;
   width: 32%;
 }
 .ul-container li:first-child {
   margin-left: 1%;
 }
</style>

<ul class="ul-container">
 <li>&nbsp;</li>
 <li>&nbsp;</li>
 <li>&nbsp;</li>
</ul>

MinusFour

#5
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 [Seleccionar]

|---|-----------------------|-----------------------|-----------------------|---|
|   |-----------------------|-----------------------|-----------------------|   |
|   |   |               |   |   |               |   |   |               |   |   |
|   |   |               |   |   |               |   |   |               |   |   |
|2px|2px|               |2px|2px|               |2px|2px|               |2px|2px|
|   |   |               |   |   |               |   |   |               |   |   |
|   |   |               |   |   |               |   |   |               |   |   |
|   |-----------------------|-----------------------|-----------------------|   |
|---|-----------------------|-----------------------|-----------------------|---|

Hubiera la misma distancia entre cada celda y tendrían el mismo tamaño.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario