25/06/2011, 07:35
|
 | | | Fecha de Ingreso: noviembre-2009 Ubicación: Argentina
Mensajes: 34
Antigüedad: 14 años, 5 meses Puntos: 18 | |
| Respuesta: Centrar varios objetos alineados PERFECTAMENTE
Solo para demostrar que no estoy loco. Va no se...
Revisen este código en base a las ideas de kseso?. Distribuye uniformemente un número desconocido de divs de tamaños desconocidos en un contenedor también de tamaño desconocido.
Código:
<!DOCTYPE html>
<html lang="es-AR">
<head>
<title>Ejemplo</title>
<style>
.padre{
width:90%;
margin:auto;
border:1px solid #000;
text-align:justify;
padding:0 20px;
line-height:20px;
}
.hijo{
width: 150px;
border:1px solid #000;
display:inline-block;
vertical-align:top;
margin-top:20px;
text-align:left;
line-height:normal;
}
.padre:after{
content:" .";
visibility:hidden;
letter-spacing:9999px;
vertical-align:bottom;
}
</style>
</head>
<body>
<p>Ejemplo 1</p>
<div class="padre" >
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
</div>
<p>Ejemplo 2</p>
<div class="padre" >
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
</div>
<p>Ejemplo 3</p>
<div class="padre" >
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
<div class="hijo"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula.</div>
</div>
</body>
</html>
Saludos!
Última edición por inieva; 25/06/2011 a las 07:42 |