Hola a todo el mundo.
Lo primero de todo es dar las gracias de antemano a todos aquellos que me ayuden.
El problema es el siguiente. Necesito maquetar una hoja de precios de la siguiente forma: un texto con el producto, que puede ocupar una linea o varias; una linea de puntos al final del producto que vaya hasta el precio, y al final el precio.
Algo asi:
Producto destacado para una
seccion en concreto..........25€
Y tengo que hacerlo con CSS. Consegui hacerlo en una sola línea usando posiciones absolutas. Colocaba un div con border-bottom en la capa contenedora, y por encima colocaba otros dos divs, uno a cada lado, con color de fondo de forma que pisaran la línea. Para productos de una sola línea queda perfecto. Incluso para los de dos líneas, solo hay que cambiar la ubicación de la capa de la línea de puntos.
Pero esta solución no me vale porque nunca se si el producto va a tener una linea o dos.
Después intente con 3 capas. de esta forma
Código:
<div id="contenedor" style="position:relative; display:block; width:200px">
<div id="texto" style="float:left; position:relative;">texto</div>
<div id="puntos "style="float:left; position:relative; border-bottom:1px dotted #666; width=100%"></div>
<div style="float:right; position:relative;">precio</div>
</div>
Pero la línea de va al 100% del contenedor. No hay forma de que esa capa del medio sea al 100%, pero del espacio que le dejan las otras.
Muchas gracias de nuevo por la ayuda a todos.