HTML和CSS堆疊框

我想創建三個框並正確對齊它們。這將是兩個箱子在一排，第三個箱子在第二個箱子下面。第二個和第三個盒子的高度等於第一個盒子。你可以直觀地看到什麼，我想在這裏做：http://codepen.io/sibraza/pen/KMzwWR HTML和CSS堆疊框

這裏是我想要達到一個例子：

段：

.block { 
 
    float: left; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
    margin-left: 300px; 
 
    margin-top: 200px; 
 
} 
 
.block2 { 
 
    float: left; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 250px; 
 
    margin-top: 200px; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
} 
 
.block3 { 
 
    float: left; 
 
    margin: auto; 
 
    width: 250px; 
 
    height: 200px; 
 
    margin-top: 290px; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
}

<div class="container-fluid"> 
 

 
    <div class="row"> 
 
    <div class="col-4-md text-center block"> 
 
     <h2> Some Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block2"> 
 
     <h2> Other Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block3"> 
 
     <h2> More Text </h2> 
 
    </div> 
 
    </div> 
 

 
</div>

來源

2016-06-12 Codes316

你能把它的照片？我看不到兩個相同尺寸的盒子或你所描述的任何東西。 –

好的，我剛剛添加了一張照片。 – Codes316

Flexbox可以使用右側div的包裝

理清這一

* { 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    display: flex; 
 
} 
 
div { 
 
    border: 1px solid #73AD21; 
 
} 
 
.block { 
 
    height: 200px; 
 
} 
 
.row > div { 
 
    flex: 1; 
 
} 
 
.col-wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.col-wrap > div { 
 
    flex: 1; 
 
}

<div class="container-fluid"> 
 

 
    <div class="row"> 
 
    <div class="col-4-md text-center block"> 
 
     <h2> Some Text </h2> 
 
    </div> 
 
    <div class="col-wrap"> 
 
     <div class="col-4-md text-center block2"> 
 
     <h2> Other Text </h2> 
 
     </div> 
 
     <div class="col-4-md text-center block3"> 
 
     <h2> More Text </h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div>

來源

2016-06-12 19:41:13

優秀！..... – Himanshu

最簡單的方法是讓大格ONT他讓原樣，而兩個在右邊創建一個div容器。所以CSS是服用點是這樣的：

.block_on_the_left { 
    float:left; 
    width:50%; 
} 
#container_on_the_right { 
    float:left; 
    width:50%; 
} 
.block2 { 
    width:100%; 
} 
.block3 { 
    width:100%; 
}

你的HTML將需要：

<div class="block_on_the_left"> 
    some stuff here for the left bit 
</div> 
<div id="container_on_the_right"> 
     <div class=".block2"> 
      some stuff 
     </div> 
     <div class=".block3"> 
      some more stuff 
     </div> 
    </div>

容器將同時按住小的div裏面，並且它們組合在一起。

來源

2016-06-12 20:01:43 Rmj86

這是一個使用柔性盒的簡單解決方案。

希望這會有所幫助。謝謝:)

.row{ 
 
    display: flex; 
 
} 
 

 
.block { 
 
    width: 250px; 
 
    height: 400px; 
 
    border: 3px solid red; 
 
    box-sizing: border-box; 
 
    } 
 
    .block2 { 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
    box-sizing: border-box; 
 
    } 
 
    .block3 { 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 3px solid blue; 
 
    box-sizing: border-box; 
 
    align-self: flex-end; 
 
    margin-left: -250px; 
 
    }

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-4-md text-center block"> 
 
     <h2> Some Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block2"> 
 
     <h2> Other Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block3"> 
 
     <h2> More Text </h2> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-06-12 20:02:42

HTML和CSS堆疊框

回答

相關問題