html - 基于 CSS 的布局等同于基于 HTML 的表格

Question

我想要一个 CSS 解决方案(原则上是 HTML5/CSS3)来重现以下基于表格的布局的行为:

<table width="80%" align="center" border="1">
  <tr valign="top">
    <td>Some content that varies in size</td>
    <td width="200">Maybe an image, maybe some short text</td>
  </tr>
</table>

我对 CSS 的最佳尝试让我将左侧内容(上面的“大小不同的内容”)环绕在右侧的 div 周围。

这是我正在尝试的:

div.outsidecontainer {
  position: relative;
  width: 80%;
  border: 1px solid silver;
  margin-left: auto;
  margin-right: auto;
}
div.absolute {
  float: right;
  width: 200px;
  margin-bottom: 1px;
  border: 1px solid silver;
}
div.filler {
  border: 1px solid silver;
  margin-bottom: 1px;
}

<div class="outsidecontainer">
  <div class="absolute">This is the fixed-size div on the right</div>
  <div class="filler">Another div element with a lot of text .....</div>
</div>

有什么建议吗？

Answer 1

您可以通过几种方式完成此操作。

不是用float right来获取右边的内容，而是直接放在右边。在每个容器内容上使用 float: left; 并在容器底部放置一个 clearfix:both;: 您的方法 - 固定

* {
  box-sizing: border-box;
}

.outsidecontainer {
  width: 100%;
  border: 1px solid black;
}

.cell {
  float: left;
}

.absolute {
  width: 200px;
}

.filler {
  width: calc(100% - 200px);
  height: 100%;
}
/*used to stop the container from collapsing*/
.clearfix {
  clear: both;
}

<div class="outsidecontainer">
  <div class="filler cell">Another div element with a lot of text .....</div>
  <div class="absolute cell">This is the fixed-size div on the right</div>
  <div class="clearfix"></div>
</div>

或者，您可以使用 display: table 通过 div 复制表格。

显示:表格方法

.t-body {
  width: 80%;
  display: table;
}

.t-row {
  display: table-row;
}

.t-cell {
  display: table-cell;
  border: 1px solid black;
}

.fw {
  width: 200px;
}

<div class="t-body">
  <div class="t-row">
    <div class="t-cell">Another div element with a lot of text ....</div>
    <div class="t-cell fw">This is the fixed-size div on the right</div>
  </div>
</div>