如何移動第一格旁邊的3d div？

Question

我有3 div s在一個div。

我想我的第三個div在我的第一個div旁邊，我的第二個div在第一個div下面。
請檢查該圖片：

我想是這樣的形象：

我用flex屬性和它的作品，但我的第二個div雲下的第三個。

#container{ 
 
    background-color: #fff; 
 
    padding: 50px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
#n1{ 
 
     width: 20%; 
 
     order: 1; 
 
     height:150px; 
 
     background-color:yellow; 
 
} 
 

 
#n2{ 
 
     width: 20%; 
 
     order: 3; 
 
     clear:right; 
 
     height:180px; 
 
     background-color:green; 
 
} 
 

 
#n3{ 
 
     width:80%; 
 
     order: 2; 
 
     height:500px; 
 
     background-color:red; 
 
}

<div id="container"> 
 
    
 
    <div id="n1"> 
 
    n1 text... 
 
    </div> 
 
    
 
    <div id="n2"> 
 
    n2 text... 
 
    </div> 
 
    
 
    <div id="n3"> 
 
    n3 text... 
 
    </div> 
 
</div>

請注意：

1. 我沒有訪問HTML，我必須只使用CSS
   
2. 我不能用絕對位置因爲第三個div高度不固定。

Answer 1

作爲替代了flexbox可以使盒子漂浮：

#container { 
    background-color: #fff; 
    padding: 50px; 
} 
#n1 { 
    float: left; 
    width: 20%; 
    height:150px; 
    background-color:yellow; 
} 
#n2 { 
    clear: left; 
    float: left; 
    width: 20%; 
    height:180px; 
    background-color:green; 
} 
#n3 { 
    margin-left: 20%; 
    width:80%; 
    height:500px; 
    background-color:red; 
} 

小提琴：https://jsfiddle.net/9whj3rL6/3

Answer 2

如果你想使用Flexbox要做到這一點你可以做的是設置固定高度的柔性容器，然後用flex-direction: column。然後你只需要設置紅色的div來取得完整的高度，它會打破右列。

* { 
 
    box-sizing: border-box; 
 
} 
 
#container { 
 
    padding: 50px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    height: 500px; 
 
} 
 
#n1 { 
 
    width: 20%; 
 
    height: 150px; 
 
    background-color: yellow; 
 
} 
 
#n2 { 
 
    width: 20%; 
 
    height: 180px; 
 
    background-color: green; 
 
} 
 
#n3 { 
 
    width: 80%; 
 
    flex: 0 0 100%; 
 
    background-color: red; 
 
}

<div id="container"> 
 
    <div id="n1"> 
 
    n1 text... 
 
    </div> 
 
    <div id="n2"> 
 
    n2 text... 
 
    </div> 
 
    <div id="n3"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias fugiat, aspernatur harum tempora repellat itaque explicabo facere impedit cumque ipsum ducimus sunt, officia autem, sit alias mollitia modi suscipit atque voluptatibus necessitatibus exercitationem! Voluptate veritatis sint facere ratione dolore, itaque mollitia quod tempore fuga beatae quis, velit reiciendis odio consectetur, voluptatem consequuntur consequatur reprehenderit suscipit autem ipsum ullam dolor modi. Adipisci aut voluptatibus architecto quo est voluptatem necessitatibus quia, voluptates quaerat commodi, perferendis minus! Quos eligendi dolore sapiente id iste reiciendis ab minus esse, excepturi, expedita vitae labore dolorem non atque maiores perspiciatis omnis adipisci! Natus qui quas obcaecati sapiente. Nesciunt veniam commodi quia dolor fugit sapiente repellendus reiciendis odio facilis iste expedita impedit maiores, voluptatibus doloribus optio quidem, tempora sequi magni quo. Cum amet magni, distinctio pariatur, cupiditate dignissimos veniam blanditiis laboriosam alias sunt deserunt et reiciendis perferendis consectetur natus. Voluptatum maiores omnis nihil delectus non aliquam possimus inventore quos tempore! Vel earum sit molestias ipsa, neque commodi delectus distinctio expedita hic esse ratione tempora animi provident officia vitae fugit libero quam explicabo nam qui, alias reiciendis aliquam suscipit beatae. Corporis nihil asperiores doloremque perferendis, rerum impedit incidunt, sequi vero cumque, officia tenetur! Alias sapiente enim ad reprehenderit, nulla aliquam consectetur expedita officia itaque error asperiores commodi quae sed provident minus libero. Assumenda, excepturi. Cum deserunt, eaque sequi. Nemo saepe, quas molestiae quibusdam ipsum at ducimus. Esse repellat nihil ipsa eaque, nobis facilis sint eius consequatur harum, neque maxime reiciendis consectetur, nostrum cupiditate laudantium non quisquam labore quas, iste porro nam perspiciatis hic voluptatem. Atque expedita dignissimos illo dolorum facilis impedit! Et molestias ut veniam! Provident perferendis, ex ipsa magnam, ipsum delectus. Unde, laudantium sunt nulla ad id doloribus minima molestias, pariatur nostrum consequuntur atque alias accusamus asperiores ullam labore voluptatibus repellat quod. Eaque dolor, nostrum labore, fugiat in repellendus expedita modi quia, libero dolore quam soluta repudiandae cupiditate rerum voluptates! Earum architecto mollitia debitis dolore excepturi consequuntur incidunt provident ab non dicta nobis, asperiores, rerum quis odit, eaque eius natus ea impedit esse accusantium id! Illum necessitatibus, rem dolorum! Itaque nobis eos, magni repellat ducimus harum accusantium facere, necessitatibus, iste laudantium quasi! Libero veritatis mollitia repellendus eum facilis possimus nihil dignissimos praesentium ea? Alias aliquid fugit magni animi incidunt porro dolorem, sapiente omnis sunt illo. Ipsum debitis, soluta aliquid assumenda distinctio illum ab! Nulla eos, sunt praesentium accusantium architecto, maiores nostrum. Itaque quibusdam nulla, reiciendis quo adipisci corrupti. 
 
    </div> 
 
</div>