什么是正确的内联CSS来替换这个HTML表？

Question

对这个问题的低质量抱歉。 CSS和HTML不是我常用的重点。我已经到了我要问的阶段：我该怎么办？

我正在一个朋友的网站（Wordpress，自托管）为她设置一些新页面。我不想改变主题的样式表，创建子主题超出了我的意思，所以我认为我只限于内联CSS（如果我错了，请纠正我 - 我也是Wordpress noob）。

我目前有以下HTML表格，其开头如下：

<table>
<tbody>
<tr>
<td style="vertical-align: top; padding-right: 20px;">
<h2 style="padding-top: 5px;">Swiss balls/eggs</h2>
<p>Large inflatable balls of varying sizes that provide support and/or an unstable base to add challenge and variety to your workout. For those with balance issues, inflatable eggs roll in one direction only for security.</p></td>
<td style="width: 160px;"><img alt="Swiss ball" src="/wp-content/uploads/2013/08/eqpt-swissball-trans.png" /></td>
<td style="vertical-align: top;" rowspan="6"><img alt="Fitness equipment" src="/wp-content/uploads/2013/08/equipment-vertical.jpg" /></td>
</tr>

...然后还有5个重复的行元素，例如：

<tr>
<td style="vertical-align: top;">
<h2 style="padding-top: 5px;">Pilates balls</h2>
<p>Smaller, soft inflatable balls of varying size that can add support, postural correction and resistance for many of the classic exercises.</p></td>
<td style="width: 160px;"><img alt="Small Pilates balls x 5" src="/wp-content/uploads/2013/08/eqpt-smallpilatesballsx5-trans.png" /></td>
</tr>

这会产生与此类似的3列乘6行布局。

我花了最后几个小时浏览论坛和stackoverflow等（例如here）尝试浮动div的各种实现，但是虽然我可以使用示例来处理少量文本而没有图像，一旦我用我的图像和文本替换占位符文本，它就会崩溃并且div开始一个接一个地垂直出现。

Answer 1

如果列是固定宽度的，则只能用浮动divs替换表。如果宽度是固定的，用行包装div替换行（<tr>），用固定宽度浮动div替换单元格（<td>）。

首先，为了清晰起见，我将使用非内联样式显示它：

<div class='row'>
  <div class='col1'>
    <!-- First column content here -->
  </div>
  <div class='col2'>
    <!-- Second column content here -->
  </div>
  <div class='col2'>
    <!-- Second column content here -->
  </div>
  <hr class='clear'>
</div>

CSS：

.row {
  width: 600px;
}
.col1, .col2, .col3 {
  float: left;
  min-height: 1px;
  width: 300px;
}
.clear {
  border: none;
  clear: both;
}

注意：您可以更改各列的宽度＆amp;宽度为.col且宽度分别为.row的表格。

然后内联：

<div class='row' style='width: 600px'>
  <div class='col1' style='float: left; min-height: 1px; width: 200px'>
    <!-- First column content here -->
  </div>
  <div class='col2' style='float: left; min-height: 1px; width: 200px'>
    <!-- Second column content here -->
  </div>
  <div class='col2' style='float: left; min-height: 1px; width: 200px'>
    <!-- Second column content here -->
  </div>
  <hr class='clear' style='border: none; clear: both'>
</div>