Układ 3 div, w których 2 są w jednej kolumnie

Question

Staram się zrobić coś takiego:

|--------------------------------------------------------|-------------| 
|              |    | 
|     DIV 1        |    | 
|              | DIV 3 | 
|--------------------------------------------------------|    | 
|     DIV 2        |    | 
|--------------------------------------------------------|-------------| 

nie mogę użyć tabeli do tego. I nie wiem, czy istnieje sposób, żeby po prostu pozwolić im się tak układać?

Próbowałem go z poniższym kodem, ale DIV 3 nie jest na górze. W rzeczywistości jest to dokładnie div2.height niżej od góry.

#DIV_1 { 
 
    height: 125px; 
 
    width: 80%; 
 
    display: block; 
 
    float: left; 
 
} 
 
#DIV_2 { 
 
    width: 80%; 
 
    height: 15px; 
 
    display: block; 
 
} 
 
#DIV_3 { 
 
    display: block; 
 
    float: left; 
 
    height: 140px; 
 
    width: 20%; 
 
}

<div class="row" style="width: 1024px; height: 140px;"> 
 
    <div> 
 
    <div id="DIV_1"></div> 
 
    <div id="DIV_2"></div> 
 
    </div> 
 
    <div id="DIV_3"> 
 
    </div> 
 
</div>

Answer 1

Spróbuj tego. Usunąłem zmiennoprzecinkowe i szerokość z DIV_1 i DIV_2 i umieściłem je w elemencie nadrzędnym.

#DIV_0 { 
 
width: 80%; 
 
float: left; 
 
} 
 
#DIV_1 { 
 
height: 125px; 
 
} 
 

 
#DIV_2 { 
 
height: 15px; 
 
} 
 

 
#DIV_3 { 
 

 
float: left; 
 
height: 140px; 
 
width: 20%; 
 

 
}

<div class="row" style="width: 1024px; height: 140px;"> 
 

 
\t <div id="DIV_0">   
 
\t \t <div id="DIV_1">div1</div> 
 
\t \t <div id="DIV_2">div2</div> 
 
\t </div> 
 

 
\t <div id="DIV_3"> 
 
\t div3 
 
\t </div> 
 

 
</div>

Answer 2

Można to osiągnąć z bootstrap Twittera. Link do bootstrap Online:

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

Następnie można użyć poniższy kod, aby to osiągnąć:

<div class="row"> 

    <div class="col-lg-8">   
     <div class="row"></div> 
     <div class="row"></div> 
    </div> 
    <div class="col-lg-4"></div> 

</div> 

Answer 3

Nie używaj pływający z #DIV_1. Zamiast tego użyj float: left, width: 80% z rodzicem #DIV_1.

Answer 4

układ jest stosunkowo prosty z CSS schematu flexbox:

.row { 
 
    display: flex;     /* establish flex container */ 
 
    height: 140px;     /* height from original code */ 
 
    width: 1024px;     /* width from original code */ 
 
} 
 

 
.row > div:first-child { 
 
    flex: 0 0 80%;     /* width from original code */ 
 
    display: flex; 
 
    flex-direction: column;  /* stack first div children vertically */ 
 
} 
 

 
.row > div:first-child > div { 
 
    flex: 1;      /* items in first div distribute space equally */ 
 
    border: 1px dashed black; 
 
} 
 

 
.row > div:last-child { 
 
    flex: 0 0 20%; 
 
    border: 1px dashed black; 
 
}

<div class="row"> 
 
    <div> 
 
     <div id="DIV_1">DIV #1</div> 
 
     <div id="DIV_2">DIV #2</div> 
 
    </div> 
 
    <div id="DIV_3">DIV #3</div> 
 
</div>

---

Zalety schematu flexbox:

1. minimalny kod; bardzo wydajny
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. to reaguje
6. przeciwieństwie pływaków i tabel, które oferują ograniczoną pojemność układu, ponieważ nigdy nie były przeznaczone dla układów budowlanych schematu flexbox jest nowoczesny (CSS3) technika z szeroki zakres opcji.

---

Browser wsparcia:

schematu flexbox jest obsługiwana przez wszystkich głównych przeglądarek, except IE < 10. Niektóre najnowsze wersje przeglądarek, takie jak Safari 8 i IE10, wymagają vendor prefixes. Aby szybko dodać prefiksy, użyj Autoprefixer. Więcej szczegółów w this answer.

Answer 5

Gorąco polecam używanie Bootstrap Grid.

coś takiego:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="row">DIV 1</div> 
     <div class="row">DIV 2</div> 
    </div> 
    <div class="col-md-4>DIV 3</div> 
    </div> 
</div> 

Answer 6

Spróbuj tego:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <style> 
     #one img, #two img{width: 300px; 
         height: 300px;} 

     #three img{height: 600px; 
       width: 600px;} 

     div#onetwo, div#three{display: inline-block;} 

    </style> 

</head> 
<body> 

    <div id="onetwo"> 
     <div id="one"><img src="image1.jpg" alt=""></div> 
     <div id="two"><img src="image2.jpg" alt=""></div> 

    </div> 

    <div id="three"><img src="image3.png" alt=""></div> 
</body> 
</html> 

lub użyć bootstrap