html - 我如何使用 div 而不是使用 table、tr 和 td 来实现这种确切的行为？

Question

在示例代码中，如何通过将 table、td 和 tr 标记替换为 div 来删除它们以实现相同的行为？这些行为包括:

1. 当页面宽度减小时，content1 文本在 column1 内换行。
2. column2 的最小宽度是其内容的宽度，在本例中是 content2 的 120px。

此代码的 JSFiddle 可以在这里找到 http://jsfiddle.net/LwXhE/337/ .

示例代码如下:

.container {
  width: 100%;
  border: 1px solid black;
}
.column1 {
  width: 65%;
  border: 1px solid green;
  vertical-align: top;
}
.column2 {
  width: 35%;
  border: 1px solid red;
  vertical-align: top;
}
.content2 {
  width: 120px;
  border: 1px solid orange;
}

<table class="container">
  <tbody>
    <tr>
      <td class="column1">
        <div class="content1">I am content I am content I am content I am content</div>
      </td>
      <td class="column2">
        <div>
          <div class="content2">Hello Hello</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用 CSS 表格模型:

.container {
  width: 100%;
  border: 1px solid black;
  display: table;
}
.column1, .column2 {
  display: table-cell;
}
.column1 {
  width: 65%;
  border: 1px solid green;
  vertical-align: top;
}
.column2 {
  width: 35%;
  border: 1px solid red;
  vertical-align: top;
}
.content2 {
  width: 120px;
  border: 1px solid orange;
}

<div class="container">
  <div class="column1">
    <div class="content1">I am content I am content I am content I am content</div>
  </div>
  <div class="column2">
    <div class="content2">Hello Hello</div>
  </div>
</div>