在图像右侧显示文本，并使文本在图像后保持缩进答案

【问题标题】：Display text to right of image, and keep text remaining indented after image在图像右侧显示文本，并使文本在图像后保持缩进
【发布时间】：2013-07-26 14:00:10
【问题描述】：

我希望创建一个简单的 WordPress 页面，该页面将显示多张图片以及一些描述。

此页面适用于希望将来自行更新的客户。她不熟悉 HTML 或 CSS。

我正在使用基于“态度”的子主题，尽管我认为这个问题适用于大多数主题。

我希望的布局是一个 img 被赋予类“alignleft”的布局，我已将 margin-right 附加到 50px。

所以，只要文字在图片旁边，它看起来就很漂亮。但是，一旦文本低于图像，它就会回到页面的左侧......我想应该是这样！ :) 只是，对于我的页面，我希望文本保持“缩进”，甚至超出图像。

问题在于图像的高度或宽度并不相同。尽管在几乎所有情况下，高度和宽度尺寸都在 100 像素到 300 像素之间。

这是一个视觉效果：

我的期望：

我得到了什么：

我已经考虑过的事情是……

div 的。如果只是我更新页面，那么 div 将非常容易实现。但我不希望她必须做任何 HTML。（也许我可以做一个模板。嗯...）
表格。我觉得这可能并不理想，因为图像的宽度可变。我想我可以将“images”列的对齐方式设置为“right”，然后在右侧将单元格填充设置为 50px。
下一代画廊。如果我这样做，那么我将无法在文本部分添加要点（因为 NextGen 照片的“描述”部分似乎无法处理这类事情）。
向 .alignleft 类添加底部边距。但是，同样，图像的高度不同，段落的长度也不同。

好的，就是这样。让我知道

我的描述中遗漏了任何重要信息
我只是让这种方式变得比我需要的更难

谢谢！，克里斯

【问题讨论】：

如果您使用自定义字段（可能与自定义帖子类型结合使用），您可以轻松更新，同时将数据插入到您想要的任何位置，这样您就可以拥有所需的任何 div 标记而无需担心客户维护任何代码。

标签： wordpress two-columns visual-editor

【解决方案1】：

你知道，我想我在这里做点什么。这可能不是最有说服力的解决方案。但我认为它会起作用。我要和桌子一起去！

首先，我安装了 TinyMCE WordPress 插件，因此任何人都可以轻松使用 WordPress 的可视化编辑器添加表格。

我已将以下 CSS 添加到我的子主题 style.css 文件中（同样，我使用的是 Attitude 子主题）：

.entry-content table tr td { width:auto;text-align:justify;vertical-align:top;}

.entry-content table tr td:first-child { width: 36%}

.entry-content table tr td:first-child img {width:100%;height:auto;}

我可能会做一些调整。但除此之外，我认为这会很好。

图像现在将具有相同的宽度。这是伟大的。我的朋友现在可以上传不同尺寸的图像（同样，高度和宽度可能在 100 像素到 300 像素之间），并且 CSS 将负责格式化。呵呵！

【讨论】：