不使用表格绘制2x1网格

Question

在不使用表格或引导程序的情况下绘制以下网格的最佳方法是什么...只是简单的CSS？是使用表的唯一方法吗？

Answer 1

可以有多种方式，这只是一个例子：

.col,.container {
    border:1px solid #000000;
  }
.row1 {
    display:flex;
  }
.col {
    flex:1;
  }

<div class="container">
    <div class="row1">
      <div class="col">col1</div>
      <div class="col">col2</div>
    </div>
    <div class="row2">row2</div>
</div>

Answer 2

尝试一次

.step1{
  position:relative;
  width:98%;
  height:100px;
  border:1px solid red;
  padding:5px;
}
.left{
  width:50%;
  float:left;
  height:100%;
  border:1px solid #600;
}
.right{
  width:48%;
  float:right;
  height:100%;
  border:1px solid #ff8800;
}
.step2{
  width:98%;
  height:100px;
  border:1px solid blue;
  padding:5px;
}

<div class="step1">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="step2"></div>

Answer 3

使用Flexbox以最小的标记，请记住flexbox的更广泛的兼容性问题：http://caniuse.com/#feat=flexbox

.container {
    border:1px solid #000000;
    display:flex;
    flex-wrap: wrap;
  }
.col {
    border:1px solid #000000;
    flex-grow:1;
  }
.row {
    flex-basis:100%;
  }

<div class="container">    
      <div class="col">col1</div>
      <div class="col">col2</div>    
      <div class="row">row</div>
</div>