两列布局，技术限制严格

Question

我必须使用CMS才能访问样式表。 style="width:200px"意义上的内部css命令正在被CMS过滤，因此也不能使用。

编辑器不允许向图像添加align="left"。我也不能通过源代码视图手动添加它。

我想要实现的目标：两列设计 - 左侧图像，右侧文本（参见线框）。

鉴于上述限制，我看到实现此目的的唯一选择是使用表格进行图像和文本定位。问题是：（对于我不可编辑）主题具有img标记的以下css属性：

max-width: 100%;
height: auto;

根据相邻单元格中的文本数量，导致Safari中的图像缩小... 对于Firefox，一切正常。

有没有人知道我能做什么？

我认为删除max-width: 100%;将是最简单的解决方案。但是否有另一种解决方案可以避免更改样式表（因为我无法访问它）？

Answer 1

如果您绝对没有其他选择

具有过时属性的旧学校表格布局

---

免责声明：我绝不支持表格布局;它们用于表格数据。这个答案纯粹是出于在问题中提出的限制范围内展示工作的目的。

---

为表格设置样式

基本上，转到MDN documentation on <table>并使用它告诉您不要使用的所有过时属性：

• valign - 用于单元格中的垂直对齐
• cellpadding - 用于填充单元格
• cellspacing - 用于单元格之间的间隙
• bgcolor - 用于背景色
• 的宽度
• 的高度
• 的边界

（这感觉很脏，但是很多回忆）

<colgroup>和<col>元素也可以提供帮助。它们仍然在当前的HTML规范中，这很好：）

天哪，让我们发疯并以<center>为中心（eww！）。有时你需要使用你拥有的东西。

重置图像宽度

正如我们在评论中所讨论的那样，您发现您的古老CMS允许在图像元素上使用样式属性。使用max-width值覆盖样式表中设置的100％值：

style="max-width: 1000px; width: 134px;"

让我们开始上学！

＆＃13;

＆＃13;

img {
  max-width: 100%;
  height: auto;
}

＆＃13;

<center>
  <table cellpadding="5">
    <tr>
      <td>
        <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">
      </td>
      <td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus gravida venenatis. Nam nisl sem, fringilla vel tempor id, congue a erat. Fusce venenatis dapibus purus ac hendrerit. Morbi in ullamcorper ligula, in varius lorem.
        </p>
        <p>Donec consectetur faucibus vehicula. Nulla semper facilisis nisi vel faucibus. Sed posuere id nibh eu finibus. In id nunc non diam laoreet efficitur vel vel ligula. Nam vitae sollicitudin mi. Phasellus dapibus sem non nisl volutpat, vitae euismod
          quam ullamcorper.</p>
      </td>
    </tr>

    <tr>
      <td>
        <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">
      </td>
      <td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus gravida venenatis. Nam nisl sem, fringilla vel tempor id, congue a erat. Fusce venenatis dapibus purus ac hendrerit. Morbi in ullamcorper ligula, in varius lorem.
        </p>
        <p>Donec consectetur faucibus vehicula. Nulla semper facilisis nisi vel faucibus. Sed posuere id nibh eu finibus. In id nunc non diam laoreet efficitur vel vel ligula. Nam vitae sollicitudin mi. Phasellus dapibus sem non nisl volutpat, vitae euismod
          quam ullamcorper.</p>
      </td>
    </tr>
  </table>
</center>

＆＃13;

＆＃13;

＆＃13;

那么我们怎么能给这个表一个宽度呢？

有人说spacer.gif？！

是的！我们回到了2002年！

这真是太可怕了，但它可能适用于CSS宽度/最大宽度的正确组合

＆＃13;

＆＃13;

img {
  max-width: 100%;
  height: auto;
}

＆＃13;

<img src="http://www.placehold.it/500/FFFFFF" style="max-width: 500px;width: 20%; height: 1000px; float: right;" />
<img src="http://www.placehold.it/500/FFFFFF" style="max-width: 500px;width: 20%; height: 1000px; float: left;" />
  <table cellpadding="5">
    <tr>
      <td>
        <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">
      </td>
      <td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus gravida venenatis. Nam nisl sem, fringilla vel tempor id, congue a erat. Fusce venenatis dapibus purus ac hendrerit. Morbi in ullamcorper ligula, in varius lorem.
        </p>
        <p>Donec consectetur faucibus vehicula. Nulla semper facilisis nisi vel faucibus. Sed posuere id nibh eu finibus. In id nunc non diam laoreet efficitur vel vel ligula. Nam vitae sollicitudin mi. Phasellus dapibus sem non nisl volutpat, vitae euismod
          quam ullamcorper.</p>
      </td>
    </tr>

    <tr>
      <td>
        <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;">
      </td>
      <td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus gravida venenatis. Nam nisl sem, fringilla vel tempor id, congue a erat. Fusce venenatis dapibus purus ac hendrerit. Morbi in ullamcorper ligula, in varius lorem.
        </p>
        <p>Donec consectetur faucibus vehicula. Nulla semper facilisis nisi vel faucibus. Sed posuere id nibh eu finibus. In id nunc non diam laoreet efficitur vel vel ligula. Nam vitae sollicitudin mi. Phasellus dapibus sem non nisl volutpat, vitae euismod
          quam ullamcorper.</p>
      </td>
    </tr>
  </table>

＆＃13;

＆＃13;

＆＃13;