HTML - 定位框

Question

我想在页面上放置三个框 - 一个在左边，占据与右边两个相同的垂直空间 - 每个框中有多行内容，三个框不相互接触。

我这样做是通过在左侧和右侧放置一个表格单元格，在另一个表格上方放置一个单格单元格行。每个单元格都有边框，使其看起来好像内容周围有一个框。

我的问题是：这是我在HTML中实现我想要的效果的最标准方法吗？对于这种效果，似乎有很多代码。

HTML

<table>
  <tbody>
    <tr>
      <td class="boxed">Multi-line content<br />
         left side</td>
      <td>
        <table>
          <tbody>
            <tr>
              <td class="boxed">Multi-line content<br />
                 top right side</td>
            </tr>
            <tr>
              <td class="boxed">Multi-line content<br />
                 bottom right side</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

CSS

.boxed {
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

输出

Answer 1

执行此操作的常用方法是使用“css float”..

float: right;
float: left;

您的代码为：http://jsfiddle.net/HgjKc/1/

如果您希望它们采用相同的垂直空间，请在css中定义“height”值。

Answer 2

为什么使用表格，它们非常过时，需要比<div>或<span>更多的代码。使用<div>或<span>，您可以使用较少的HTML来更好地控制您的网站。