Zważywszy, że HTMLukład CSS, wykorzystanie CSS, aby zmienić kolejność DIV
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
renderowanie jako
content 1
content 2
content 3
Moje pytanie:
Czy istnieje sposób, aby uczynić go jak poniżej za pomocą CSS tylko bez zmiany części HTML.
content 1
content 3
content 2
To może nie odpowiadać dokładnie to, co jesteś po, ale spójrz na to pytanie:
CSS positioning div above another div when not in that order in the HTML
Zasadniczo, trzeba by użyć JavaScript, aby była ona w żaden sposób niezawodny.
Jestem w sytuacji tylko CSS, w każdym razie, to, co powiedziałeś, ma sens. –
Jedno słowo odpowiedź: nie. Zajrzyj do XSLT (XML Stylesheet Language Transforms), który jest językiem specjalnie nastawionym na manipulowanie XML.
XSLT będzie masowo przeładowany tym prostym zadaniem manipulacji DOM ... – nickf
To prawda, ale byłoby to również najlepsze rozwiązanie. Wszystkie inne wymagają skryptów po stronie klienta, które nie będą działać we wszystkich przypadkach. –
Nie bardzo rozumiem negatywny wynik tego komentarza. Tak, pytanie dotyczyło CSS, ale odpowiedź Samira stanowi jedyny niezawodny sposób osiągnięcia zamierzonego efektu w każdej przeglądarce, nawet przy wyłączonej obsłudze JavaScript. – jcayzac
Dostałem go do pracy w ten sposób:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
ale należy pamiętać, że to nie będzie pracować dla Ciebie jak najszybciej mieć dynamicznej zawartości. Powodem, dla którego napisałem ten przykład, jest to, że nie znając dokładniejszych informacji o twoich treściach, nie mogę dać lepszej odpowiedzi. Jednak takie podejście powinno wskazywać ci właściwy kierunek, jeśli chodzi o używanie względnego pozycjonowania.
Jest to jeden z klasycznych przypadków użycia dla pozycjonowania absolutnego - aby zmienić sposób renderowania z porządku źródłowego. Musisz znać wymiary elementów div, aby móc to zrobić niezawodnie, a jeśli nie, javascript jest jedynym rozwiązaniem.
Bezwzględne pozycjonowanie naprawdę nie nadaje się do tego celu, ponieważ sprawia, że trudno jest utrzymać CSS nawet w mało prawdopodobnym przypadku, gdy * wiesz * wymiary. – SamB
byłem bawić w Firefoksie 3 z Firebug, a wymyślił następujące:
<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>
To nie jest idealny, ponieważ trzeba znać wysokość każdego pojemnika i stosować tę wartość wysokości do ujemny górny margines ostatniego elementu i dolny margines pierwszego elementu.
Nadzieja pomaga, nd
Jeśli znasz wysokość każdego elementu to jest to prosta sprawa pionowego pozycjonowania względnego zamienić wokół zamówień. Jeśli nie znasz wysokości, musisz albo podać im wysokość, albo pozwolić divom uzyskać paski przewijania, jeśli jest jakaś przepełnienie, albo obliczyć wszystko za pomocą JavaScript i dodać względne pozycjonowanie w locie.
Można to zrobić w przeglądarkach obsługujących standard CSS3 flexbox concept, w szczególności właściwość flexbox-order.
Zobacz here
Jednak wsparcie to only in current versions of most browsers nadal.
Edytuj Czas się przesuwa i obsługa Flexbox poprawia się.
Nie wiedziałem o tym jeszcze (dość późno na imprezę, jak się wydaje;)). Pamiętam, jak rozmawiałem z kolegami o tym, jak najlepiej CSS mają jakieś implementacje hbox i vbox. Wygląda na to, że teraz jest :). Szkoda, że jest tak źle obsługiwane. – Mosselman
Działa to dla mnie: http://tanalin.com/en/articles/css-block-order/
przykład z tej strony:
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 */
Jak wspomniano powyżej, powinno to działać w większości przeglądarek. Sprawdź link, aby uzyskać więcej informacji.
To jeden z najmądrzejszych obejść CSS, jakie kiedykolwiek widziałem. Dzięki! – AKG
To mnie uśmiechnęło. To naprawdę sprytne. :) – Captainlonate
Niesamowita odpowiedź dla tych z nas, którzy potrzebują obsługiwać przeglądarki non-flexbox – mga
z jQuery można po prostu zrobić:
$('#content2').insertAfter($('#content3'));
Nie sądzę, istnieje sposób, aby to zrobić z CSS, z wyjątkiem zmusić pozycjonowanie stałe każdego z div i układać je w ten sposób.
Twoje pytanie jest bardzo dobre, ponieważ przydaje się do optymalizacji SEO w celu dostosowania nav-divs poniżej zawartości. Powinieneś dowiedzieć się, dlaczego tego chcesz w swoim ciele pytania - aby ludzie zrozumieli jego użycie. – sorin
Powodem, dla którego jestem tym zainteresowany, jest jedynie oddzielenie układu od kodowania backendu. Nasz HTML jest dynamicznie generowany przez backend. Byłoby wspaniale, gdyby nasz inżynier backendu nie potrzebował niczego wiedzieć o układzie, a inżynier frontendu mógł zamówić wszystko, co uzna za stosowne. – speedplane