并排创建 3 个盒子答案

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

【解决方案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/

它只是你想要的。希望对您有所帮助。

【讨论】：

更不用说 div 只是一般来说更好的方法。
是的，这是什么 1995？ xD 让我们用框架和桌子来做吧！
非常感谢您的帮助，这正是我想要的，非常感谢