-1

为这个问题的低质量道歉。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 开始一个接一个地垂直出现。

4

1 回答 1

0

divs如果列是固定宽度的，您只能真正用浮动替换表格。如果宽度是固定的，请将行 ( <tr>) 替换为包装 div，将单元格 ( <td>) 替换为固定宽度的浮动 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>

和CSS：

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

注意.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>
于 2013-08-04T19:12:43.443 回答