Czy istnieje sposób zmiany kolejności DIV HTML przy użyciu tylko CSS?

Mam plik .HTML, w którym nie można zmienić, pod żadnym pozorem.Czy istnieje sposób zmiany kolejności DIV HTML przy użyciu tylko CSS?

Muszę nadać stronie internetowej, która powoduje, że nagłówek DIV u góry strony (szerokość 100%), DIV nawigacji (25% szerokości) pojawia się po lewej stronie PONIŻEJ nagłówka DIV, z DIV sprzedaży (75% szerokości), pojawiają się po prawej stronie Nawigacyjnego DIV, z DIV produktów (100% szerokości) poniżej DIV sprzedaży.

Ze stopką DIV na samym dole poniżej wszystkich pozostałych DIV na stronie, szerokość 100%.

<body> 
    <div id="wrapper"> 
     <div id="nav"></div> 
     <div id="header"></div> 
     <div id="sales"></div> 
     <div id="products"></div> 
     <div id="footer"></div> 
    </div> 
</body>

Czy można to zrobić bez zmiany porządku logicznego HTML DIV i tylko przy użyciu pozycjonowania CSS, pływaków itp.?

Źródło

2012-11-23 NotedThat

Tak, jest. Czy próbowałeś już czegoś? Nie chcemy wykonywać twojej pracy. – looper

Czy możesz umieścić kod HTML, do którego się odwołujesz? –

Czy próbowałeś używać pozycji? dobrym przykładem możliwości css jest [css zen garden] (http://www.csszengarden.com/). – Eric

Skorzystaj z właściwości ustalonej pozycji i ustaw wartości właściwości top.

Źródło

2012-11-23 12:50:37 SaidbakR

To bardzo zależy od początkowej struktury strony. Jedyną opcją, którą naprawdę masz, jest unoszenie elementów div za pomocą metody float: right lub float: pozostawione do odpowiednich sekcji w połączeniu z innymi regułami css.

Używanie pozycji: * ma zastosowanie tylko w bardzo ograniczonych okolicznościach i wątpię, czy to wystarczy, aby spełnić Twoje wymagania.

Źródło

2012-11-23 12:50:43

Wiem, że to nie odpowiada na pytanie, ale myślę, że byłoby istotne, aby powiadomić, że powodem, dla którego jest to trudne, jest to, że jest to zła praktyka.

Aby uniknąć problemów z kolejnością ustawiania ostrości, pozycjonowaniem lub urządzeniami specjalnymi (drukarka, czytnik ekranu, ...): "treść należy porządkować w znaczącej kolejności".

Wystarczy rzucić okiem na: C27: Making the DOM order match the visual order

Źródło

2012-11-23 13:01:49

Jeśli można ustalić wysokość nadproża, to jest to dość trywialne, wystarczy użyć pozycji: marże bezwzględnych lub negatywne dla #header:

#wrapper {positioN:relative;padding-top:100px;} 
#header {position:absolute;top:0;width:100%;height:100px;} 
#nav {display:inline-block;width:25%;} 
#sales {display:inline-block;width:75%;} 
#products {margin-left:25%;} 
#footer {}

http://jsfiddle.net/FZTj7/1/

I te bloki inline można przełączyć na elementy pływające, aby #nav znalazł się poniżej górnej części bloku produktów:

#wrapper {positioN:relative;margin:20px;padding-top:100px;} 
#header {position:absolute;top:0;width:100%;height:100px;} 
#nav {float:left;width:25%;} 
#sales {float:left;width:75%;} 
#products {margin-left:25%;} 
#footer {clear:left;}

http://jsfiddle.net/FZTj7/2/

Źródło

2012-11-23 13:20:14 gkond

Korzystanie z css position atrybut powinien być pierwszą rzeczą, aby spróbować (screencast).

Jeśli kiedykolwiek CSS nie jest wystarczający do osiągnięcia projektu, inną możliwością jest zmiana kolejności elementów div w drzewie domowym za pomocą javascript. JQuery na przykład ma pomocników do manipulowania węzłami DOM.

Są to w każdym razie dobre praktyki, których należy unikać, ale jeśli nie można zmienić źródła, które jest ładne, wszystko, co pozostało.

Edit:

W przypadku użyć javascript, może trzeba przeładować css po DIV dostaje w odpowiedniej kolejności. Ponowne załadowanie css można również uzyskać using javascript.

Źródło

2012-11-23 13:20:22 Eric

Czy istnieje sposób zmiany kolejności DIV HTML przy użyciu tylko CSS?

Odpowiedz

Powiązane problemy