图像果园CMS周围的简单包装文本

Question

这是一个简单的问题，任何人都知道在Orchard CMS中添加内容时如何使图像整齐地适合图像？

在我看来，它是网页内容的基础，但它是Orchard似乎无法处理的唯一“开箱即用”

我确定有一个解决方法可能带有样式标签或其他东西，但我宁愿不实施软糖，以防我在这里遗漏一些简单的东西

目前，如果我通过首先将'I'光束光标放在文本中间最左边的字符位置0来添加图像，则由EDITOR生成以下HTML。请注意，BOLD放置的图像没有格式化，所以看起来很糟糕。

任何评论赞赏

Answer 1

你可以做几件事。

首先，当您打开媒体选择器时，会出现一个名为Allignment的下拉菜单。如果您选择，例如Left，文本将从图像的右侧进行换行。如果选择Right，图像将向右移动，文本将从图像的左侧换行。

但是，从设计的角度来看，在图像周围包装文本的首选方法是使用CSS样式。

这是从图像右侧包装文本所需的样式示例：

img {
    float: left;
    padding: 5px;
}

这是从图像左侧包装它的示例：

img {
    float: right;
    padding: 5px;
}

请注意，此样式将有效地应用于网站中的所有图像，并且我在图像周围添加了一些间距。如果您希望它仅适用于特定图像，则需要更改CSS选择器以适应您要执行的操作。

要从Orchard管理中实际看到这一点，您必须将此样式添加到/Modules/TinyMce/Scripts/themes/advanced/skins/default/content.css并从浏览器中清除缓存。

要在您的主题上看到这一点，您必须将此样式添加到主题的CSS中。