Wie 3 divs arrangieren: div 1 und 2 in der linken Spalte gestapelt und div 3 rechte Spalte

Question

Ich habe drei divs, die ich wie dieses

Mein Code vereinbaren möchten wie folgt aussehen sollte:

<div class="container"> 
    <div class="div1">Div #1</div> 
    <div class="div2">Div #2</div> 
    <div class="div3">Div #3</div>  
</div> 

Also - was sollte mein css/html sein, wenn überhaupt möglich zu machen?

Answer 1

.container { 
 
    display: flex;    /* establish flex container */ 
 
    flex-direction: column;  /* align children (flex items) vertically */ 
 
    flex-wrap: wrap; 
 
    height: 120px; 
 
} 
 

 
.container > div { 
 
    flex: 1 0 50px;   /* occupy free space, don't shrink, initial height */ 
 
    width: calc(50% - 10px); /* half container size less margins */ 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    <div class="div1">Div #1</div> 
 
    <div class="div2">Div #2</div> 
 
    <div class="div3">Div #3</div> 
 
</div>

---

Vorteile von Flexbox:

1. minimal-Code; sehr effizient
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. es ist ansprechbar
6. anders als Schwimmer und Tabellen, die begrenzte Layout Kapazität bieten, weil sie nie für Gebäudepläne bestimmt waren, Flexbox ist ein modernes (CSS3) -Technik mit eine breite Palette von Optionen.
   • Methods for Aligning Flex Items
   • Using CSS flexible boxes ~ MDN
   • A Complete Guide to Flexbox ~ CSS-Tricks
   • What the Flexbox?! ~ YouTube Video-Tutorial
   :

---

Um mehr über Flexbox Besuch zu erfahren

---

Browser-Unterstützung:

Flexbox von allen gängigen Browsern unterstützt wird, except IE 8 & 9. Einige aktuelle Browserversionen wie Safari 8 und IE10 erfordern vendor prefixes. Um schnell alle benötigten Präfixe hinzuzufügen, verwenden Sie Autoprefixer. Weitere Details in this answer.

Answer 2

<style type="text/css"> 
.main{ 
    height:500px; 
    width:400px; 
} 
div.subDiv{ 
    height:50%; 
    margin:5px; 
} 
div.subDiv>div{ 
    width:47%; 
    height:100%; 
    display:inline-block; 
} 
div.subDiv>div>div{ 
    height: 122.5px; 
    background-color:gray; 
} 
div.subDiv>div>div+div{ 
    margin-top:5px 
} 
.gray{ 
    background-color:gray; 
} 
</style> 
<div class="main"> 
    <div class="subDiv"> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
     <div class="gray"></div> 
    </div> 
</div> 

Versuchen Sie dies.

Answer 3

Um Ihr erwartetes Ergebnis Verwendung folgende Option

.container { 
    height: 100px; 
} 

.div1 { 
    float: left; 
    postion: absolute; 
    width: 20%; 
    border: 1px solid black; 
    height: 50%; 
} 

.div2 { 
    float: left; 
    clear: both; 
    vertical-align: bottom; 
    width: 20%; 
    border: 1px solid black; 
    height: 50%; 
} 

.div3 { 
    display: inline-block; 
    width: 20%; 
    height: 100%; 
    border: 1px solid black; 
} 

http://codepen.io/nagasai/pen/KMWgEz

zu erreichen