Skip to content

Instantly share code, notes, and snippets.

@bertobox
Created September 17, 2013 17:31
Show Gist options
  • Save bertobox/6597677 to your computer and use it in GitHub Desktop.
Save bertobox/6597677 to your computer and use it in GitHub Desktop.
Objetos flotantes con CSS
/**
* Objetos flotantes con CSS
* Los siguientes ejemplos muestran
* cómo funciona la propiedad `float`.
*
* En este caso, queremos que la imagen
* y el pie de foto queden alineados
* a la derecha del texto, con un margen.
*
* @author Robert Valencia ( http://rober.tv )
* @copyright (cc) 2013 Creative Commons.
*/
/* Estilos generales */
body {
background-color: rgba(245,245,240,1);
}
img {
border: 1px solid rgba(112,112,112,.2);
}
.contenedor {
width: 33em;
margin: 3em auto;
background-color: #fff;
padding: 2em;
}
/* Estilos específicos */
.contenedor.ejemplo-dos .imagen {
width: 153px;
}
.contenedor.ejemplo-dos .imagen img {
width: 100%;
border: 1px solid rgba(0,138,184,.35);
}
.contenedor.ejemplo-dos .flotar-derecho {
float: right;
padding: 0 0 0 1em;
}
.contenedor.ejemplo-dos .caption {
font-size: .75em;
padding-right: .75em;
}
.contenedor.ejemplo-dos a {
text-decoration: none;
color: rgba(0,138,184,.8);
}
<div class="contenedor ejemplo-uno">
<div class="imagen flotar-derecho">
<a href="#"><img src="http://placehold.it/153x198/fff/009EC2&text=PDF" alt="PDF"></a>
<p class="caption"><a href="#">Excepteur sint aute irure dolor deserunt mollit anim id est laborum.</a></p>
</div><!-- .imagen.flotar-derecho -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- .contenedor.ejemplo-uno -->
<div class="contenedor ejemplo-dos">
<div class="imagen flotar-derecho">
<a href="#"><img src="http://placehold.it/153x198/fff/009EC2&text=PDF" alt="PDF"></a>
<p class="caption"><a href="#">Excepteur sint aute irure dolor deserunt mollit anim id est laborum.</a></p>
</div><!-- .imagen.flotar-derecho -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- .contenedor.ejemplo-dos -->
// alert('Hello world!');
{"view":"split-vertical","fontsize":"190","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment