Layout von 3 DIVs, wobei 2 in einer Spalte stehen

8

Ich versuche, so etwas zu machen:

%Vor%

Ich kann dafür keine Tabelle verwenden. Und ich weiß nicht, ob es einen Weg gibt, sie einfach so zu stapeln?

Ich habe es mit dem Code unten versucht, aber DIV 3 ist nicht ganz oben. Es ist tatsächlich genau div2.height niedriger von oben.

%Vor% %Vor%
    
Micard 19.08.2016, 18:33
quelle

6 Antworten

6

Versuchen Sie es. Ich habe float und width von DIV_1 und DIV_2 entfernt und auf den Parent gesetzt.

%Vor% %Vor%
    
Kodos Johnson 19.08.2016, 18:46
quelle
9

Das Layout ist mit CSS flexbox relativ einfach:

%Vor% %Vor%

Vorteile von flexbox:

  1. minimaler Code; sehr effizient
  2. Zentrierung, sowohl vertikal als auch horizontal, ist einfach und einfach
  3. Spalten mit gleicher Höhe sind einfach und einfach
  4. mehrere Optionen zum Ausrichten von Flex-Elementen
  5. es reagiert
  6. Im Gegensatz zu Floats und Tischen, die eine begrenzte Layoutkapazität bieten, weil sie nie für Gebäudelayouts gedacht waren, ist flexbox eine moderne (CSS3) Technik mit einer breiten Palette von Optionen.

Browserunterstützung:

Flexbox wird von allen gängigen Browsern unterstützt, außer IE & lt; 10 . Einige aktuelle Browserversionen wie Safari 8 und IE10 erfordern Anbieterpräfixe . Um schnell Präfixe hinzuzufügen, verwenden Sie Autoprefixer . Weitere Details finden Sie in dieser Antwort .

    
Michael_B 19.08.2016 18:46
quelle
4

Verwenden Sie nicht Floating mit #DIV_1 . Verwenden Sie stattdessen float: left, width: 80% mit dem Elternteil von #DIV_1 .

    
H. Jabi 19.08.2016 18:44
quelle
4

Ich würde wärmstens empfehlen, Bootstrap Grid zu verwenden.

In etwa so:

%Vor%     
nmg49 19.08.2016 18:48
quelle
2

Das kannst du mit dem Bootstrap von twitter erreichen. Link zum Bootstrap online:

%Vor%

Dann können Sie den folgenden Code verwenden, um dies zu erreichen:

%Vor%     
d3r1ck 19.08.2016 18:39
quelle
1

Versuchen Sie Folgendes:

%Vor%

oder Bootstrap verwenden

    
Afzal Ashraf 19.08.2016 18:55
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Verankere Tags, die bei Verwendung von # in Chrome nicht funktionieren