html - property - ¿Cómo puedo reordenar mis divs con CSS?
order property (23)
Aquí hay una solución:
<style>
#firstDiv {
position:absolute; top:100%;
}
#wrapper {
position:relative;
}
Pero sospecho que tienes algo de contenido que sigue a la envoltura div ...
Dada una plantilla donde el HTML no se puede modificar debido a otros requisitos, ¿cómo es posible mostrar (reorganizar) un div encima de otro div cuando no están en ese orden en el HTML? Ambos div s contienen datos que varían en altura y anchura.
<div id="wrapper">
<div id="firstDiv">
Content to be below in this situation
</div>
<div id="secondDiv">
Content to be above in this situation
</div>
</div>
Other elements
Esperemos que sea obvio que el resultado deseado es:
Content to be above in this situation
Content to be below in this situation
Other elements
Cuando las dimensiones se fijan, es fácil ubicarlas donde sea necesario, pero necesito algunas ideas para cuando el contenido sea variable. Por el bien de este escenario, considere que el ancho es del 100% en ambos.
Estoy buscando específicamente una solución solo para CSS (y probablemente tendrá que encontrarse con otras soluciones si eso no funciona).
Hay otros elementos siguiendo esto. Se mencionó una buena sugerencia dado el escenario limitado que demostré, ya que podría ser la mejor respuesta, pero también estoy buscando asegurar que los elementos que siguen a continuación no se vean afectados.
Bueno, con un poco de posicionamiento absoluto y una configuración de margen poco fiable, puedo acercarme, pero no es perfecto ni bonito:
#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }
El "margen superior: 4em" es el bit particularmente desagradable: este margen debe ajustarse de acuerdo con la cantidad de contenido en el primerDiv. Dependiendo de sus requisitos exactos, esto podría ser posible, pero de todos modos espero que alguien pueda aprovechar esto para una solución sólida.
El comentario de Eric sobre javascript probablemente debería ser perseguido.
CSS realmente no debería ser usado para reestructurar el backend HTML. Sin embargo, es posible si conoce la altura de los dos elementos involucrados y se siente presumido. Además, la selección de texto se desordenará al pasar entre los divs, pero eso es porque el orden de HTML y CSS son opuestos.
#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }
Donde XXX y YYY son las alturas de firstDiv y secondDiv respectivamente. Esto funcionará con elementos finales, a diferencia de la respuesta superior.
Como han dicho otros, esto no es algo que quieras hacer en CSS. Puede manipularlo con posicionamiento absoluto y márgenes extraños, pero no es una solución robusta. La mejor opción en tu caso sería recurrir a javascript. En jQuery, esta es una tarea muy simple:
$(''#secondDiv'').insertBefore(''#firstDiv'');
o más genéricamente:
$(''.swapMe'').each(function(i, el) {
$(el).insertBefore($(el).prev());
});
Con el módulo de diseño de flexbox CSS3, puede ordenar divs.
#wrapper {
display: flex;
flex-direction: column;
}
#firstDiv {
order: 2;
}
<div id="wrapper">
<div id="firstDiv">
Content1
</div>
<div id="secondDiv">
Content2
</div>
</div>
Es fácil con css, solo use display:block y z-index property
Aquí hay un ejemplo:
HTML:
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
</body>
CSS:
.wrapper
{
[...]
}
.header
{
[...]
z-index:9001;
display:block;
[...]
}
.content
{
[...]
z-index:9000;
[...]
}
Edición: es bueno establecer un poco background-color en los div-s para ver las cosas correctamente.
Esta solution utiliza solo CSS y trabaja con contenido variable.
#wrapper { display: table; }
#firstDiv { display: table-footer-group; }
#secondDiv { display: table-header-group; }
Estaba buscando una manera de cambiar las órdenes de los divs solo para la versión móvil, así que puedo darle un estilo agradable. Gracias a la respuesta de Nickf conseguí hacer este código que funcionó bien para lo que quería, así que pensé en compartirlo con ustedes:
// changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
if ( jQuery(window).width() < 480 )
{
jQuery(''#main-content'').insertBefore(''#sidebar'');
}
if ( jQuery(window).width() > 480 )
{
jQuery(''#sidebar'').insertBefore(''#main-content'');
}
jQuery(window).height(); // New height
jQuery(window).width(); // New width
});
Esto se puede hacer solo con CSS!
Por favor, compruebe mi respuesta a esta pregunta similar:
https://.com/a/25462829/1077230
No quiero publicar dos veces mi respuesta, pero el problema es que el padre debe convertirse en un elemento de flexbox. P.ej:
(solo se usa el prefijo de proveedor de webkit aquí).
#main {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
Luego, intercambia los divs indicando su orden con:
#main > div#one{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
overflow:visible;
}
#main > div#two{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
Esto se puede hacer utilizando Flexbox.
Cree un contenedor que aplique tanto display: flex como flex-flow: column-reverse .
/* -- Where the Magic Happens -- */
.container {
/* Setup Flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Reverse Column Order */
-webkit-flex-flow: column-reverse;
flex-flow: column-reverse;
}
/* -- Styling Only -- */
.container > div {
background: red;
color: white;
padding: 10px;
}
.container > div:last-of-type {
background: blue;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">
second
</div>
</div>
Fuentes:
Los márgenes superiores negativos pueden lograr este efecto, pero deberían personalizarse para cada página. Por ejemplo, este marcado ...
<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>
... y este CSS ...
.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }
... le permitiría sacar el segundo párrafo por encima del primero.
Por supuesto, tendrá que ajustar manualmente su CSS para diferentes longitudes de descripción para que el párrafo de introducción aumente la cantidad apropiada, pero si tiene un control limitado sobre las otras partes y un control total sobre el marcado y el CSS, entonces esta podría ser una opción. .
No hay absolutamente ninguna manera de lograr lo que quiere a través de CSS solo mientras se admiten los agentes de usuario pre-flexbox (en su mayoría, IE antiguo ), a menos que :
- Conoces la altura de renderización exacta de cada elemento (si es así, puedes posicionar absolutamente el contenido). Si estás tratando con contenido generado dinámicamente, estás fuera de suerte.
- Usted sabe el número exacto de estos elementos que habrá. Nuevamente, si necesita hacer esto para varios fragmentos de contenido que se generan dinámicamente, no tiene suerte, especialmente si hay más de tres o menos.
Si lo anterior es cierto, entonces puede hacer lo que quiera al posicionar absolutamente los elementos:
#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }
Nuevamente, si no sabes la altura deseada para al menos #firstDiv, no hay forma de que puedas hacer lo que quieras solo a través de CSS. Si alguno de estos contenidos es dinámico, tendrá que usar javascript.
O establezca una posición absoluta para el elemento y elimine los márgenes declarándolos desde el borde de la página en lugar del borde del objeto. Utilice% como su más adecuado para otros tamaños de pantalla ect. Así es como superé el problema ... Gracias, espero que sea lo que está buscando ...
Para la solución Sólo para CSS 1. La altura de la envoltura debe ser fija o la altura de la segunda div debe ser fija
Poco tarde a la fiesta, pero también puedes hacer esto:
<div style="height: 500px; width: 500px;">
<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>
<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>
Si sabe, o puede imponer el tamaño para el elemento superior, puede usar
position : absolute;
En tu css y dales a los divs su posición.
de lo contrario javascript parece la única manera de ir:
fd = document.getElementById( ''firstDiv'' );
sd = document.getElementById( ''secondDiv'' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );
o algo similar.
edición: encontré esto que podría ser útil: w3 document css3 move-to
Solo use flex para el div padre especificando display: flex y flex-direction : column . Luego, usa el orden para determinar cuál de los divs infantiles viene primero
Tengo un código mucho mejor, hecho por mí, es tan grande, solo para mostrar ambas cosas ... crear una tabla 4x4 y alinear verticalmente más que solo una celda.
No utiliza ningún hackeo de IE, no vertical-align: middle; en absoluto...
No se usa para centrado vertical de la tabla de visualización, pantalla: table-rom; pantalla: tabla-celda;
Utiliza el truco de un contenedor que tiene dos divs, uno oculto (la posición no es la correcta pero hace que el padre tenga el tamaño de variable correcto), uno visible justo después del oculto pero con la parte superior: -50%; por lo que es mover a la posición correcta.
Ver las clases div que hacen el truco: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible
Perdón por usar el español en los nombres de las clases (es porque hablo español y esto es tan complicado que si uso el inglés me pierdo).
El código completo:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
div.BloqueTipoTabla{
display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoFila_AltoAjustadoAlContenido{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoFila_AltoRestante{
display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoCelda_AjustadoAlContenido{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
}
div.BloqueTipoCelda_RestanteAncho{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
}
div.BloqueTipoCelda_RestanteAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
}
div.BloqueTipoCelda_RestanteAnchoAlto{
display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
}
div.BloqueTipoContenedor{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
}
div.BloqueTipoContenedor_VerticalmenteCentrado{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
}
div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
}
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[1,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[1,4]
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[2,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[2,4]
</div>
</div>
<div class="BloqueTipoFila_AltoRestante">
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
The cell [3,1]
<br />
* * * *
<br />
* * * *
<br />
* * * *
<br />
Now is the highest one
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is<br />cell [3,2]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is<br />cell [3,2]
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAnchoAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This is cell [3,3]
<br/>
It is duplicated on source to make the trick to know its variable height
<br />
First copy is hidden and second copy is visible
<br/>
Other cells of this row are not correctly aligned only on IE!!!
</div>
</div>
</div>
</div>
<div class="BloqueTipoCelda_RestanteAlto">
<div class="BloqueTipoContenedor" style="border:1px solid lime;">
<div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
<div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
This other is<br />the cell [3,4]
</div>
<div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
This other is<br />the cell [3,4]
</div>
</div>
</div>
</div>
</div>
<div class="BloqueTipoFila_AltoAjustadoAlContenido">
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,1]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,2]
</div>
<div class="BloqueTipoCelda_RestanteAncho">
[4,3]
</div>
<div class="BloqueTipoCelda_AjustadoAlContenido">
[4,4]
</div>
</div>
</div>
</body>
</html>
Tengo una forma sencilla de hacer esto.
<!-- HTML -->
<div class="wrapper">
<div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>
<div>Content that stays in place</div>
<div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>
</div>
<!-- CSS -->
.sm-hide {display:block;}
.sm-show {display:none;}
@media (max-width:598px) {
.sm-hide {display:none;}
.sm-show {display:block;}
}
Una solución con un soporte de navegador más grande que la flexbox (funciona en IE≥9):
#wrapper {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
#wrapper > * {
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
}
<div id="wrapper">
<div id="firstDiv">
Content to be below in this situation
</div>
<div id="secondDiv">
Content to be above in this situation
</div>
</div>
Other elements
En contraste con la display: table; solución esta solución funciona cuando .wrapper tiene cualquier cantidad de niños.
solo necesitas esto! en css float primer div por izquierda o derecha. flotar segundo div por izquierda o derecha igual que primero. despeje a la izquierda o a la derecha lo mismo que arriba dos div para el segundo div por ejemplo:
#firstDiv {
float: left;
}
#secondDiv {
float: left;
clear: left;
}
Diviértete amigo.
Una solución solo para CSS (funciona para IE10+ ) - use la propiedad de order de Flexbox:
Demostración: http://jsfiddle.net/hqya7q6o/596/
#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }
<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/order
.move-wrap {
display: table;
table-layout: fixed; // prevent some responsive bugs
width: 100%; // set a width if u like
/* TODO: js-fallback IE7 if u like ms */
}
.move-down {
display: table-footer-group;
}
.move-up {
display: table-header-group;
}