【html】¿Por qué el bloque div en la segunda fila no flota automáticamente hacia arriba después de que el elemento está configurado para flotar?
Por ejemplo: Si uno de tus flotadores tiene 250 metros de altura, entonces esta fila tendrá 250 metros de altura. Además, flotar hacia la izquierda solo sigue al último. Si sube como dijiste, no son solo nubes flotantes, se llama dislocación.
Por ejemplo:
ltdiv gt1 lt;/div ltdiv gt2 lt/div gt3 lt/div ltdiv gt4 lt/div gt5 lt; div gt; no importa cuál sea la altura de 1234, incluso si es adecuado sin envolver, 5 seguirá a 4, no se insertará debajo de 1 ni después de 2. . .
Si desea crear un diseño en cascada, puede utilizar directamente el complemento de cascada de JQ o buscar ejemplos ya preparados en línea. CSS puro solo puede depender del posicionamiento, lo cual es un inconveniente.
Puedes probar CSS3.
¡Es! ¿TIPO DE DOCUMENTO? HTML gt
lthtml gt
lthead gt
ltmeta? http-equiv="Tipo de contenido "? content = " text/html;? charset=utf-8 "
diseño en cascada lttitle gtCSS3
ltstyle gt
. contenedor {
-WebKit-column-width: 160 px
-moz-column-width: 160 px
-o column-width: 160; px;
-WebKit-columna-gap: 1px;
-moz-column-gap: 1px;
-o columna-gap: 1px; /p >
}
div: no (.container) {
-WebKit-border-radius: 5px
-moz-border-; radio: 5px;
Radio del borde: 5px
Fondo: #D9D9D9
Borde:: #CCC? 1px? sólido;
Pantalla: bloque en línea;
Ancho: 157 px;
Posición: relativa
Margen: 2px; p>
}
.
Título {
Alto de línea: ¿80 px? tamaño de fuente: 18px;? Color: # 900;
Alineación de texto: centrado
font-family: "Microsoft? Yahei"; /style gt;
lt/head gt;
ltbody gt
ltsection gt
ltdiv? class="contenedor "
ltdiv? estilo="altura:80px"? class="title " >Diseño en cascada CSS3 puro
ltdiv? estilo="altura: 260px " > lt/div gt;
ltdiv? estilo="altura：65px " > lt/div gt;
ltdiv? estilo="altura: 120px " > lt/div gt;
ltdiv? estilo="altura: 145px " > lt/div gt;
ltdiv? estilo="altura: 90px " > lt/div gt;
ltdiv? estilo="altura: 145px " > lt/div gt;
ltdiv? estilo="altura: 160px " > lt/div gt;
ltdiv? estilo="altura:65px " > lt/div gt;
ltdiv? estilo="altura: 230px " > lt/div gt;
ltdiv? estilo="altura: 140px " > lt/div gt;
ltdiv? estilo="altura: 85px " > lt/div gt;
ltdiv? estilo="altura: 20px " > lt/div gt;
ltdiv? estilo="altura: 145px " > lt/div gt;
ltdiv? estilo="altura：50px " > lt/div gt;
ltdiv? estilo="altura:65px " > lt/div gt;
ltdiv? estilo="altura: 230px " > lt/div gt;
ltdiv? estilo="altura: 140px " > lt/div gt;
ltdiv? estilo="altura: 85px " > lt/div gt;
ltdiv? estilo="altura: 20px " > lt/div gt;
ltdiv? estilo="altura: 145px " > lt/div gt;
ltdiv? estilo="altura：50px " > lt/div gt;
ltdiv? estilo="altura：145px " > lt/div gt;
ltdiv? estilo="altura: 160px " > lt/div gt;
ltdiv? calle
yle="altura: 240px " > lt/div gt;
lt/div gt;
lt/sección gt
lt/cuerpo gt; /p>
lt/html gt；