Uso de float en css para crear un listado de imágenes y textos

marzo 13, 2007 at 6:21 pm Deja un comentario

<style>
body {
	margin: 0;
}

#content {
	width: 100%px;
}

#content img {
	float: left;
}

#content p {
	float: left;
	width: 163px;
}

.separator {
	clear: both;
	height: 1px;
}
</style>

<div id="content">

<img src="http://127.0.0.1:3001/imagenes/medicacion.gif" />

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
df sfd sdf
sdf sd fsd
f sdf sdf sdf asdfij asdfh uasgh puafhg puadhsfg uiahfg puoiahd fguhadpfuoghapuodfgh puadfgh uadfh
a dfgafs gopjaiafgi``agjadg

</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<div class="separator"></div>

<!-- repeat the above a number of times -->
<img src="http://127.0.0.1:3001/imagenes/medicacion.gif" />

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<div class="separator"></div>

</div>
Anuncios

Entry filed under: css.

INSTALACIÓN Y CONFIGURACIÓN BÁSICA DE UN SISTEMA DE CONTROL DE VERSIONES DE FICHEROS CON SUBVERSION EN WINDOWS Instalar mc en ubuntu

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Calendario

marzo 2007
L M X J V S D
« Feb   Abr »
 1234
567891011
12131415161718
19202122232425
262728293031  

Most Recent Posts


A %d blogueros les gusta esto: