堆叠HTML和CSS中的框

Question

我想创建三个盒子并正确对齐它们。它将是一行中的两个盒子和第二个盒子下面的第三个盒子。第二个和第三个框的高度等于第一个框。您可以直观地看到我在这里要做的事情：http://codepen.io/sibraza/pen/KMzwWR

这是我想要实现的一个例子：

段：

.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>

Answer 1

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>

Answer 2

对此进行排序的最简单方法是让他按原样使用更大的div，并为右边的两个创建容器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，并将它们组合在一起。

Answer 3

这是一个使用flex-box的简单解决方案。

希望这会有所帮助。谢谢:)）

＆＃13;

＆＃13;

.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; 
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;