Pregunta sobre css – Haga una pantalla div bajo otra usando CSS en un diseño totalmente fluido

2

He actualizado mi código e hice un violín que explica lo que estoy tratando de hacer. Antes tenía una pregunta similar pero no reflejaba la fluidez de la plantilla.

tengo undiseño totalmente fluido y necesitohacer una pantalla div bajo otro.

Quiero hacerlo con CSS y prefiero no usar javascript o jquery.

Aquí está el violín:http://jsfiddle.net/sexywebteacher/7hCNC/20/

Tal vez no estaba claro:Estoy hablando de la sección 1 y la sección 2 divs en el violín

¿Crees que esto se puede hacer?

¡Gracias!

Hey, ty! Estoy hablando de los divs "section1" y "section2" en el violín webmasters
¿Por qué no puedes agregar otro?div debajo de ella otra vez? Tom Abraham

Tu respuesta

4   la respuesta
0

Aquí hay otro ejemplo de claro. Me gusta usar esto en los casos en que el elemento después del borrado no siempre es consistente. Utiliza los elementos psuedo para colocar un espacio con el atributo clear.

<code>.clear:after{
content:"."; 
line-height:0; 
height:0; 
display:block; 
clear:both; 
visibility:hidden;
}
</code>
2

Añadir a div flotante"clearfix" clase donde en CSS

<code>.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</code>

Por ejemplo:

<code><div class="column clearfix">
...
</div>
</code>
)) solo para tijsfiddle.net/BKRyT jumancy
Realmente no lo entiendo, ¿me puede mostrar en el violín? :( webmasters
+1 me acabas de vencer. kwelch
0

Puede cambiar el ancho para que sea el ancho exacto (o agregarlo como ancho mínimo) y dejarlos caer naturalmente uno debajo del otro o simplemente borrar lo que los obligará uno debajo del otro.

p.ej

<code>.clear {
  clear:both;
}
</code>

tujsfiddle

Hey, ty! Estoy hablando de los divs "section1" y "section2" en el violín. Mi error por no ser más claro. webmasters
4

Si tanto la altura de la imagen como el texto son variables, no es particularmente fácil con CSS puro.

La altura siendo variable descarta cualquier cosa basada enposition: absolute, como en las respuestas que recibiste atu pregunta similar anterior.

Una opción es usar la técnica que se muestra aquí:http://tanalin.com/en/articles/css-block-order/

Es posible cambiar el orden vertical de los bloques en la página HTML usando la presentación de la tabla CSS usando las propiedades de display: table family. Respecto del orden de bloqueo en código HTML, encabezado (table-header-group) de dicha tabla se muestra en la parte superior de la misma, pie de página (display: table-footer-group) —En la parte inferior, y el cuerpo de la mesa (table-row-group) —Entre encabezado y pie de página.

Esto funciona en todos los navegadores modernos, e IE8 si tienes cuidado. Esono Trabajar en IE6 / 7.

Aquí está tu código usando esta técnica:http://jsfiddle.net/thirtydot/7hCNC/35/

Debo admitir que nunca he usado esta técnica en un sitio web de producción, así que por favor realice una prueba a fondo.

Un enfoque diferente que funcionará enTodos los navegadores que soportan transformaciones CSS3 2D. es voltear verticalmente todo el contenedor, y luego hacer lo mismo con los elementos "imagen" y "texto". En los navegadores que no admiten transformaciones CSS3, todo seguirá funcionando, pero los elementos "imagen" y "texto" estarán en su orden original. En otras palabras, se degrada muy bien. Probablemente sea posible hacer que esto funcione en IE6-8 usandofilter, pero eso haría que el texto se vea horrible, así que olvídalo.

Aquí está tu código usando esta técnica:http://jsfiddle.net/thirtydot/7hCNC/36/

Si ninguno de estos métodos CSS es lo suficientemente bueno, tendrás que usar JavaScript.

Sin embargo, personalmente te recomiendo que solocambiar el orden en el HTML. Dudo que a Google le importeal respecto. En este caso, realmente dudo que doblar hacia atrás para mantener su HTML en el "orden óptimo" tendrá un impacto significativo en SEO.

Para la técnica entanalin.com/en/articles/css-block-order No pude hacerlo funcionar hasta que me pusefloat: none; sobre los elementos. ¡Solo un consejo! Hugo Scott-Slade
Ty mucho por una gran respuesta! webmasters

Preguntas relacionadas