Question

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

content1 text-wrapps在column1中，当页面宽度减小时。
column2＆min;的最小宽度是其内容的宽度，在这种情况下，content2是120px。

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

以下是示例代码：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用CSS表模型：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: