Ändern Sie das Layout von Elementen mithilfe von CSS, ohne HTML zu ändern

Question

Ändern Sie das Layout von Elementen mithilfe von CSS, ohne HTML zu ändern

8

Ich habe HTML-Markup, das aus drei divs besteht:

%Vor%

Ich möchte es in zwei verschiedenen Layouts mit CSS präsentieren (wäre besser, wenn ich kontrollieren könnte, ob die Seitenleiste links oder rechts erscheint):

%Vor%

In der Tat wäre es schöner, wenn ich kontrollieren könnte, ob die Seitenleiste links oder rechts erscheint.

Ich kann zusätzliche divs hinzufügen und / oder die Quellreihenfolge von divs ändern, solange der Inhalt vor der Sidebar angezeigt wird . Aber der HTML-Code kann nicht pro Layout geändert werden.

Hier ist mein unvollständiger Versuch, das Problem mit der Eigenschaft flexbox + order zu lösen.

%Vor% %Vor%

html css css3 flexbox

Salman A 16.04.2015, 10:27

quelle

3 Antworten

4

Überprüfen Sie diese Demo , wenn Sie div wie .middle.layout-2 enthalten.

HTML:

%Vor%

CSS:

%Vor%

chatoo 16.04.2015 11:14

quelle

1

Lass es mich wissen, wenn du das willst:

HTML:

%Vor%

CSS:

%Vor%

Demo: Ссылка

Dies hat kein zusätzliches div oder Markup. Sie müssen nur die Klasse in container umschalten.

K K 16.04.2015 11:03

quelle

Tags und Links html css css3 flexbox

Django: Verwenden von Annotate, Count und Distinct in einem Queryset SwipeRefreshLayout aktualisiert den Konflikt mit fragmentTransactions

score 3 · Accepted Answer

Normalerweise vermeide ich Floats wie die Pest, aber für diesen Fall tun sie, was Sie brauchen.

Wenn Sie die Seite wechseln möchten, auf der die Seitenleiste aktiviert ist, tauschen Sie einfach die Links und Rechte aus.

Dadurch bleibt Ihr Layout mit dynamischen Inhalten erhalten:

%Vor% %Vor%