替换此HTML表的正确内联CSS是什么？

为这个问题的低质量道歉。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等（例如）尝试各种浮动div的实现，但是虽然我可以得到一些示例来处理少量文本而没有图像，但只要我用图像和文本替换占位符文本，所有这些都会分解，div开始在垂直方向上一个接一个地出现。

如果列的宽度固定，则只能用浮动的

div

替换表。如果宽度是固定的，则用包装div替换行（

），用固定宽度浮动div替换单元格（

）

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

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

注意：您可以分别使用

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

您可以发布您已有的css吗？JSFIDLE会很有用。我们可以用小提琴吗？我不会使用内联CSS，因为一些div是动态创建的，不会将CSS分配给它们。取而代之的是考虑编写自定义样式表，并确保它取代当前样式表。为什么要尝试用任何东西替换HTML表？这似乎是一个毫无意义的练习——尤其不适合新手。

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