Foros del Web - Ver Mensaje Individual

C2am · #2 (**permalink**) 16/01/2012, 12:33

Hola
A ver que te parece esto:

Código HTML:

Ver original<html>
<body>
 
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto uno<br/>continua producto</span></div>
        <div class="cajaprecio"><span class="texto">$120000.50</span></div>
        <div class="puntos"></div>
 
    </div>
    
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto dos: </span></div>
        <div class="cajaprecio"><span class="texto">$120000.50</span></div>
        <div class="puntos"></div>
 
    </div>
    
    <div class="contenedor">
        <div class="cajaproducto"><span class="texto">Producto tres tres tres</span></div>
        <div class="cajaprecio"><span class="texto">$12000588954560.50</span></div>
        <div class="puntos"></div>
 
    </div>
 
 
    </div>
</body>
</html>

Código CSS:

Ver original.contenedor{
    width:100%;
    height:50px;
    overflow:hidden;
    }
.cajaproducto{
    float:left;
    height:100%;
    display:table;
     }
 
.cajaprecio{
    height:100%;
    float:right;
    display:table;
}
 
.puntos{
    height:90%;
    border-bottom:1px dashed #666;
    overflow:hidden;
}
 
.texto{
    display:table-cell;
    vertical-align:bottom;}

Aquí lo podés ver en funcionamiento.

Aclaración: solo funcionara con navegadores modernos, eso quiere decir IE9 en adelante, debido a la propiedad display: table.

Esto se puede mejorar mucho, por supuesto, si utilizamos eso de display:table más eficientemente, lo cual me hace pensar si en realidad no deberías usar una tabla real.

Pero en base a tu ejemplo, y pensando en la estructura: producto (float:left) - puntos (al 100% del resto) - precio(float:right) se soluciona cambiando el orden en el html, es decir primero los dos con float (producto y precio) y luego "puntos (sin float)" para que de esta forma pueda acomodarse entre ambos.

El table-cell es para poder aplicar vertical-align:bottom de manera que al tener dos lineas quede bien, porque sino quedan los puntos y el precio más arriba.

saludos