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堆叠框

回答

相关问题