2

我正在寻找一个简单的 WordPress 页面，该页面将显示多张图像以及一些描述。

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

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

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

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

更重要的是，图像不会都具有相同的高度或宽度。尽管在几乎所有情况下，高度和宽度尺寸都在 100 像素到 300 像素之间。

这是一个视觉效果：

我希望什么：

在此处输入图像描述

我得到了什么：

在此处输入图像描述

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

  1. div的。如果只是我更新页面，那么 div 将非常容易实现。但我不希望她必须做任何 HTML。（也许我可以做一个模板。嗯...）

  2. 表。我觉得这可能并不理想，因为图像的宽度可变。我想我可以将“图像”列的对齐方式设置为“正确”，然后在右侧将单元格填充设置为 50px。

  3. 下一代画廊。如果我这样做，那么我将失去在文本部分添加项目符号的能力（因为 NextGen 照片的“描述”部分似乎无法处理这类事情）。

  4. 向 .alignleft 类添加边距底部。但是，同样，图像的高度不同，段落的长度也不同。

好的，就是这样。如果.......请告知我们

  • 我错过了描述中的任何重要信息

  • 我只是让这种方式比我需要的更难

谢谢！，克里斯

4

1 回答 1

0

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

首先，我安装了 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 将负责格式化。嘘！

于 2013-07-26T14:45:05.413 回答