为这个问题的低质量道歉。CSS 和 HTML 不是我通常的踩踏地。我已经到了我只想问的阶段:我到底是怎么做到的?
我正在一个朋友的网站(Wordpress,自托管)上为她设置一些新页面。我不想更改主题的样式表,并且创建子主题超出了我的范围,所以我认为我仅限于内联 CSS(如果我错了,请纠正我 - 我也是 Wordpress 菜鸟)。
我目前有以下 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 列 x 6 行布局。
我花了过去几个小时浏览论坛和 stackoverflow 等(例如这里)尝试浮动 div 的各种实现,但是当我替换占位符文本时,虽然我可以获得使用少量文本和没有图像的示例对于我的图像和文本,一切都崩溃了,div 开始一个接一个地垂直出现。