我正在制作一个每月发布文章的网站。它很简单，我认为使用Markdown编辑器（比如Stack Overflow中的WMD）会非常完美。
然而，他们需要在给定段落中将图像右对齐的功能。
我无法使用当前系统实现这一功能 - 这可能吗？
Markdown和图像对齐
264
- jedidja
8
4为什么不直接问问题，而不用陈述“我在帮助一个非营利网站，每个月发布有关某些问题的文章”？ - JGallardo
17@JGallardo 因为我希望清楚表明我无法完全控制系统，也没有购买任何类型的解决方案的能力。我同意我本可以用不同的措辞来提问。 - Jedidja
4关于 Markdown 编辑器，你可以使用非常棒的 https://stackedit.io/editor# ，在它上面写作非常棒 :) - AbdelHady
2@AbdelHady 如果它在2008年就已经可用了 :) - Jedidja
4@iPython 如何把一个在2008年提出的问题标记为一个在4年后（2012年）提出的重复问题？ - Jedidja
显示剩余3条评论
20个回答
275
你可以在Markdown中嵌入HTML，就像这样：
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
- Greg Hewgill
7
47请清理并标准化，分别是去掉不必要的
div 并给 img 标签添加关闭斜杠，即 <img style="float:right" src="whatever.jpg" />。请注意不改变原意。 - ma11hew2827这个工作最好使用一些已经过处理的解释器，比如GitHub的解释器：
21@MattDiPasquale 关闭斜杠不是必需的。那是XHTML，不是HTML。 - CaptSaltyJack
我尝试在Ghost博客文章中嵌入图片，使用<div style="float:right"><img ...></div>可以正确地将下一段落围绕在图片周围，而<img style="float: right" ...>则会将段落和图片放在并排的框中。 - Martin DeMello
1@benweet，谢谢你提供的信息，找到那个信息确实不容易。 - luizv
显示剩余2条评论
107
我在纯Markdown中找到了一个不错的解决方案，只需使用一点点CSS 3 hack即可 :-)
当image alt以<或>结尾时，请遵循CSS 3代码中的浮动图像，使其位于左侧或右侧。
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
- OzzyCzech
2
1CSS应该放在MkDocs目录的哪个位置？@YannDuran - Joseph Tesfaye
3请确保按照MkDocs文档添加一个名为extra.css的文件，并将CSS代码放入该文件中。注意不要改变原文意思。 - Yann Duran
62
我有一个替代方法，不使用上述使用ALT标签和CSS选择器的方法... 相反，加入一个URL哈希标记，像这样：
首先是你的Markdown图片代码：
注意添加的URL哈希 #center。
现在使用CSS 3属性选择器添加此规则，以选择具有特定路径的图像。
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
你应该能够像定义类名一样使用URL哈希，这并不像某些人评论的那样误用ALT标签。这也不需要任何额外的扩展。为右浮动和左浮动以及其他可能需要的样式都做一个。
- tremor
7
1正是我想要的。你是我的救星。
还有一件事，我想要添加的是
h1 h2{ clear: both } 这样下一个标题就会在新的一行开始（不会与图片重叠）。 - bhar1red看起来像我要找的东西，但是...我该如何制作CSS？以及我该如何在Markdown中调用它？ - Tony D
7不是真的，你的解决方案滥用了“alt”标签，这可能会对页面的辅助功能合规性产生不良影响，而该解决方案则通过src标签使用了一种非侵入式方法。 - tremor
谢谢，但我如何使用单个CSS文件将所有图像居中？ - Luis
谢谢，有没有办法使用CSS将所有图像对齐到中心？ - Luis
显示剩余2条评论
61
许多Markdown的“额外”处理器支持属性。因此，您可以像这样包含类名（PHP Markdown Extra）：
{.callout}
或者，也可以使用以下方式（Maruku，Kramdown，Python Markdown）：
{: .callout}
当然，您可以按照正确的方法使用样式表：
.callout {
float: right;
}
- gerwitz
3
当你写下所有这些内容时：
{: .callout} 你可能会想，不如直接写成 <img src="/flowers.jpeg" class="callout"/>。 - lfalin
{: .callout} 你可能会想，不如直接写成 <img src="/flowers.jpeg" class="callout"/>。 - lfalin1我同意，但是Markdown通常被选择用来为那些不是*ML熟练的用户提供帮助，所以没有理由认为HTML比其他任意语法更好。 - gerwitz
4“没有理由”当然是过于简单化了。有许多用户体验的原因会让您希望编辑器与最终的HTML渲染更接近或更远。或者，如果您选择使用Markdown来抽象渲染技术，您可能不愿引入对HTML的依赖性。” - gerwitz
35
我喜欢使用表格和垂直线（|）语法来将图像对齐，这让我可以变得超级懒。一些Markdown风格支持此功能（如果你更喜欢Textile也支持）：
| I am text to the left |  |
|  | I am text to the right |
它不是最灵活的解决方案，但对于我大多数简单需求来说很好，在markdown格式中易于阅读，而且您不需要记忆任何CSS或原始HTML。
- learnvst
4
2我喜欢这种风格，非常适合Markdown。可惜它在Github上不能用（至少目前还不行）。 - Eliot
4我刚在 GitHub 尝试了这个语法，现在似乎可以工作了。 - Ege Rubak
12这是一个有趣的黑客技巧，但它误用表格进行布局。欢迎来到1999年。 - jxpx777
4对于 Github 风格的 Markdown，需要在表格开始处添加一行
|-|-|。这告诉分析器，它是一个表格，并且第一行是表头。例如：http://goo.gl/xUCRiK - Kayla28
嵌入CSS是不好的：
在另一个文件中的CSS：
img[alt=Flowers] { float: right; }
- user142019
10
74什么？现在每次更改 Markdown 内容都要编辑一个外部文件？这对我来说听起来不是一个好的解决方案。 - Jordan Reiter
10在这里，每个人都编写了一个由多个文件组成的程序，其中逻辑被分散/组织在许多位置。我们刻意这样做是为了可维护性。为什么这种方式如此痛苦和不同呢？ - Mark Bolusmjak
10Markdown能让非程序员用户创建内容，而且不应该依赖于必须直接访问和编辑服务器上文件的方式。另一个例子是：我认为将数据库字段的名称硬编码到代码中是完全正常的，但基于数据库字段值进行硬编码是错误的（例如，
if product.name == 'Tulips'），因为您不能依赖该值的稳定性。只需将“Flowers”更改为“Flower”，就会使图像突然消失了。此外，每次添加图片时，他们都必须给您打电话！ - Jordan Reiter29这是对alt标签的严重误用。它应该是图片的文字描述，为不能看到图片的人提供帮助。 - Nathan Grigg
5我很惊讶有这么多人对这个解决方案感到悲伤。这是一个美妙的技巧，对于解决某些托管服务的问题是必要的。提供这个美妙技巧的发帖者现在已经离开了，取而代之的是一群哭哭啼啼的社区成员。 - Aaron Robinson
显示剩余5条评论
12
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
markdown 属性可以在 Markdown 中使用。
- raphox
4
1对我有用。我没有使用Github。谢谢@raphox。 - Hugo Lopes Tavares
3这是Markdown Extra功能，它包含在某些内容管理系统（例如Drupal）中，但并不是Markdown本身的功能。 - Tim
我最近开始使用Astro，并注意到虽然这个标记不起作用，但是稍微改进一下，使用
<span>代替<div>的版本实际上可以在Astro默认配置下工作：<span style="float:left;margin:0 10px 10px 0"></span>（它甚至可以处理换行符，但是注释格式不允许在此处换行。） - goetz10
更加简化的方法是将 p#given img { float: right } 放在样式表中，或者放在 <head> 中并用 style 标签包装。然后只需使用 markdown 格式  即可。
- ma11hew28
9
如果您使用Python实现，可以使用扩展来添加HTML键值对和类/ID标签。其语法如下：
或者，如果嵌入式样式不符合您的需求，
{: style="float:right"}
或者，如果嵌入式样式不符合您的需求，
{: .floatright}
配合相应的样式表，stylish.css：
.floatright {
float: right;
/* etc. */
}
- jameh
8
我喜欢 learnvst的答案, 因为它非常易读 (这也是写 Markdown 的目的之一)。
然而，在 GitBook 的 Markdown 解析器中，我不仅需要添加一个空标题行，还需要在其下方添加分隔线，以便识别并正确渲染表格:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
分隔线至少需要包含三个破折号
---。- icarito
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接