并排创建3个盒子

Question

到目前为止，这是我所拥有的，感谢MRManSam，他帮助my previous question。如何使框看起来像在图像中一样？

.wrap {
  text-align: center;
}

table {
  display: inline-table;
  border-collapse: collapse;
}

td { 
  border: solid 1px #CCC;
  padding: 10px;
}

<div class="wrap">
  <table>
    <tr>
      <td>Test 1</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>Test 2</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>Test 3</td>
    </tr>
  </table>

Answer 1

有一百万种方法可以做到这一点，但这里只有一个：

<强> HTML

<div class="box">
    <header>
         <h2>stuff</h2>
    </header>
    <div class="body">things</div>
</div>
<div class="box">
    <header>
         <h2>stuff</h2>
    </header>
    <div class="body">things</div>
</div>
<div class="box">
    <header>
         <h2>stuff</h2>
    </header>
    <div class="body">things</div>
</div>

<强> CSS：

body {
    /* body hack for jsfiddle, do not use */
    overflow-x: scroll;
    width:900px;
}
div.box {
    border-radius: 8px;
    box-shadow: 1px 1px 0px #555;
    min-width: 200px;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
}
div.box > header {
    background: #333;
    color: white;
    padding: 1px 20px;
}
div.box > header > h2 {
    line-height:20px;
    font-size:20px;
    text-align: center;
}
div.box div.body {
    line-height:20px;
    font-size:20px;
    color:#333;
    background:#eaeaea;
    padding: 20px;
}

请在此处查看结果： http://jsfiddle.net/u5jxk2qs/

它正是您想要的。希望它有所帮助。