Teniendo en cuenta que el código HTMLdiseño CSS, el uso de CSS para reordenar DIVs
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
render como
content 1
content 2
content 3
Mi pregunta:
¿Hay una manera de hacerla como a continuación mediante el uso de CSS solo sin cambiar la parte HTML.
content 1
content 3
content 2
Puede que no coincida exactamente lo que está buscando, pero echa un vistazo a esta pregunta:
CSS positioning div above another div when not in that order in the HTML
Básicamente, usted tendría que usar Javascript para que sea fiable en cualquier forma.
Estoy en una situación de CSS solamente, de todos modos, lo que dices tiene sentido. –
Una palabra respuesta: no. Mire en XSLT (XML Stylesheet Language Transforms), que es un lenguaje específicamente diseñado para manipular XML.
XSLT sería masivamente exagerado para esta simple tarea de manipulación DOM ... – nickf
Cierto, pero también sería la mejor solución. Todos los demás requieren secuencias de comandos del lado del cliente, que no funcionarán en todos los casos. –
No entiendo muy bien el puntaje negativo de este comentario. Sí, la pregunta era sobre CSS, pero la respuesta de Samir proporciona la única forma confiable de lograr el efecto deseado en cada navegador, incluso con el Javascript desactivado. – jcayzac
Yo tengo que trabajar al hacer esto:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
pero hay que tener en cuenta que esto no va a funcionar tan pronto como usted tiene un contenido dinámico. La razón por la que publiqué este ejemplo es que sin saber más cosas específicas sobre su contenido, no puedo darle una mejor respuesta. Sin embargo, este enfoque debería indicarle la dirección correcta en cuanto al uso del posicionamiento relativo.
Este es uno de los casos de uso clásicos para el posicionamiento absoluto: para cambiar la representación de la fuente. Sin embargo, necesita conocer las dimensiones de los divs para poder hacer esto de manera confiable, y si no lo hace, javascript es su único recurso.
El posicionamiento absoluto no es una buena opción para esto, ya que hace que el CSS sea difícil de mantener incluso en el caso poco probable de que * conozca * las dimensiones. – SamB
me estaba metiendo en Firefox 3 con Firebug, y se acercó con lo siguiente:
<div>
<div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
<div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
<div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>
No es perfecto, ya que se necesita saber las alturas de cada contenedor, y aplicar ese valor de la altura a la margen superior negativo del último elemento y el margen inferior del primer elemento.
creo que sirve, nd
Si conoce la altura de cada elemento, entonces es un simple caso de posicionamiento relativo vertical para intercambiar alrededor de las órdenes. Si no conoces las alturas, entonces tienes que darles alturas y permitir que los divs obtengan barras de desplazamiento si hay desbordamiento o calcularlo todo con JavaScript y agregar el posicionamiento relativo sobre la marcha.
Esto se puede hacer en los navegadores que admiten el CSS3 flexbox concept, particularmente la propiedad flexbox-order.
Ver here
Sin embargo, el apoyo de esto es only in current versions of most browsers todavía.
Editar El tiempo pasa y la compatibilidad de flexbox mejora ..
No lo sabía aún (parece bastante tarde para la fiesta;)). Recuerdo haber hablado con algunos colegas sobre lo ideal que es que CSS tenga algún tipo de implementación de vbox y hbox. Parece que lo hace ahora :). Lástima que es tan mal soportado. – Mosselman
Esto funciona para mí: http://tanalin.com/en/articles/css-block-order/
Ejemplo de esta página:
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group; } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */
Como se indicó allí, esto debería funcionar en la mayoría de los navegadores. Verifique el enlace para más información.
Esta es una de las soluciones de CSS más inteligentes que he visto. ¡Gracias! – AKG
Esto me hizo sonreír. Eso es realmente inteligente. :) – Captainlonate
¡respuesta impresionante para aquellos de nosotros que necesitamos soportar navegadores no flexbox – mga
con jQuery se puede simplemente hacer:
$('#content2').insertAfter($('#content3'));
No creo que hay una manera de hacerlo con CSS, excepto para forzar el posicionamiento fijo de cada uno de los divs y les apilar de esa manera.
Su pregunta es muy buena porque es útil para optimizaciones de SEO a fin de situar los nav-div debajo del contenido. Debes expandir por qué quieres esto en el cuerpo de tu pregunta, para que la gente entienda su uso. – sorin
La razón por la que estoy interesado en esto es simplemente para separar el diseño de la codificación de back-end. Nuestro HTML es generado dinámicamente por el back-end. Sería genial si nuestro ingeniero de back-end no necesitara saber nada sobre el diseño, y el ingeniero frontend podría reordenar todo lo que crea conveniente. – speedplane