Saltar al contenido

ejemplo de div flotante en código html

Recuerda que en las ciencias informáticas un problema puede tener varias resoluciones, pero aquí te compartiremos la mejor y más eficiente.

Ejemplo 1: cómo limpiar flotadores

This is the code 

.float-wrapper::after 
  content: "";
  clear: both;
  display: block;

---------------------------------------------------------------
Explanation:

.float-wrapper -> is some parent element that wraps the floating items

example:
<divclass='float-wrapper'><divclass='floating-item'>div><divclass='floating-item'>div> 
     ....
 div>

::after  adds  an element after the .float-wrapper, that 
has no content and clears floats from the both sides, making sure, 
other sections are not affected by floats

Ejemplo 2: código html para flotar la imagen a la derecha

DOCTYPEhtml><html><body><h2>Floating Imagesh2><p><strong>Float the image to the right:strong>p><p><imgsrc="smiley.gif"alt="Smiley face"style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
p><p><strong>Float the image to the left:strong>p><p><imgsrc="smiley.gif"alt="Smiley face"style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
p>body>html>

Si guardas algún titubeo y forma de perfeccionar nuestro división eres capaz de ejecutar una crítica y con mucho gusto lo interpretaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *