两个div边界的相等对齐

Question

我使用bootstrap构建一个布局，尝试使用div构建一个表 但我不能均衡2个divs边框以正确垂直对齐。

HTML：

<div id="p_table">
  <div id="h_tb" class="row">
    <div id="lt_h_tb" class="col-md-4">Starter</div>
    <div id="sub_h_tb_mid" class="col-md-4">Premium</div>
    <div id="rt_h_tb" class="col-md-4">Golden</div>
  </div>

  <div id="r_tb" class="row r_tb ">
    <div id="b_lr" class="col-md-4">
      <p><span>form $</span>1000</p>
    </div>
    <div id="b_lr" class="col-md-4">
      <p><span>form $</span>2000</p>
    </div>
    <div id="b_lr" class="col-md-4">
      <p><span>form $</span>3000</p>
    </div>
  </div>

  <div id="n_tb" class="row n_tb">
    <div id="b_lr" class="col-md-12">   
      <p><button type="submit" id="get_it" class="btn btn-success">Get IT</button></p>
    </div>
  </div>

</div>

CSS：

#p_table {
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
}

#h_tb {
  font-size:24px;   
  color:#000;  
  border-bottom:1px solid #ccc;
  text-align: center;
  margin:0;
}

图像：

Answer 1

添加以下CSS

#p_table {
    display: table;
    width: 100%;
}

#p_table > .row {
    display: table-row;
}

#p_table > .row > div {
    display: table-cell;
}

设置div表格样式