更改Typo3中内容元素的CSS的最佳方法是什么？

Question

我正在创建一个列出公司员工的网页。每个员工都应该得到一个自己的盒子，在左边带有文本，在右边带有图片。为了做到这一点，我为每个员工使用了一个“文本和图像”内容元素。

但是，图像对齐选项不允许我使用文本换行将图像放置在文本的右侧（所有选项均为不换行选项）。确保图片最终显示在文本右侧的最佳方法是什么？

This is an example of a picture that is right aligned with wrap.

此外，我还希望每个“文本和图像”内容元素的边框具有样式。我该怎么办？

Answer 1

使用“文本和图像”内容元素时，您可以使用以下有关图像和文本位置的选项：

• 上方，居中
• 上方，左侧
• 上面，对
• 在下面，居中
• 在左下方
• 在右下方
• 在文本中，右
• 在文本中，左
• 在文本旁边，对
• 在文本旁边，左

“在文本中，右”和“在文本中，左”均用文本包裹图像，如以下示例图片所示：

如果选项较少，则某些TSConfig会限制选项的数量；例如，可能是这样的

TCEFORM.tt_content.imageorient.removeItems = 17,18

关于CSS，您可以通过多种方式来添加CSS；例如，您可以使用page.includeCSS as documented here添加自己的文件，也可以在模板分析器中使用您自己的文件（请参见plugin.tx_frontend._CSS_DEFAULT_STYLE覆盖Fluid Styled Content包含的TypoScript。

要包括默认CSS，必须在模板中包括Static TypoScript Fluid Content Elements CSS (optional) (fluid_styled_content)，如下图所示：

此外，我将使用检查器来确保CSS未被意外覆盖。