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

我期待创建一个简单的WordPress页面，它将显示多个图像以及一些说明。显示图像右侧的文本，并保持文本在图像后缩进

此页面适合希望在未来自行更新的客户。她不熟悉HTML或CSS。

我使用基于“态度”的儿童主题，但我认为这个问题将适用于大多数主题。

我期望的布局是一个img被给予类“alignleft”，我已经为其附加边距右边为50px。

所以，只要文字在图像旁边，它就会显得非常华丽。但是，一旦文字在图像下方，它就会回到页面的左侧，就像它应该那样，我想！ :) 只有对于我的页面，我希望文本保持“缩进”状态，即使是在图像之后。

踢球者是，图像不会都是相同的高度或宽度。尽管在几乎所有情况下，高度和宽度尺寸都在100px到300px之间。

这里有一个视觉：

什么，我希望：

enter image description here

什么，我抵达：

enter image description here

事情我已经考虑的是...

div的。如果只是我更新页面，div的实现将非常容易。但我不希望她必须做任何HTML。（也许我可以做一个模板，嗯......）
表。我觉得这可能是不理想的，因为图像的宽度可变。我想我可以将“图像”列的对齐方式设置为“正确”，然后在右侧将单元格填充设置为50px。
NextGen Gallery。如果我这样做了，那么我就失去了在文本部分使用子弹点的能力（因为NextGen照片的“说明”部分似乎没有处理这种事情）。
向.alignleft类添加边距底部。但是，图像的高度不一样，段落也会有不同的长度。

好吧，就是这样。让我知道如果

我会想说明什么重要的信息
我只是做这样难度比我需要

感谢！克里斯

来源

2013-07-26 Chris

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

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

首先，我安装了TinyMCE WordPress插件，因此使用WordPress的可视化编辑器添加表格对于任何人都很容易。

我已经添加了下面的CSS我的孩子主题的style.css文件（同样，我使用的态度子主题）：

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

我可能会让一些调整。但否则，我认为这将工作得很好。

图像现在宽度相同。这很棒。我的朋友现在可以上传不同大小的图片（再次，大概在100px和300px之间的高度和宽度），CSS将处理格式。好哇！

来源

2013-07-26 14:45:05 Chris

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

回答

相关问题