我正在做一个网站,每月发表文章的问题。这很简单,我认为使用Markdown编辑器(如Stack Overflow中的WMD)将是完美的。

然而,他们确实需要在给定的段落中使图像右对齐的能力。

我看不出在目前的体制下有什么办法能做到这一点——有可能吗?


当前回答

在警告框内,将图像和文本作为单个块中的段落的一部分并排对齐。

<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%;  float:right; padding:0.7em"/>
<b>isomorphism</b>  &rarr;  In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>

输出:

其他回答

许多Markdown“额外”处理器支持属性。所以你可以像这样包含一个类名(PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

或者,备用的(我的,Kramdown, Python Markdown):

![Flowers](/flowers.jpeg){: .callout}

然后,当然,您可以以正确的方式使用样式表:

.callout {
    float: right;
}

如果您的文档支持这种语法,那么它将为您提供两全其美的服务:没有嵌入标记,样式表足够抽象,无需内容编辑器修改。

我喜欢超级懒地用垂直管道(|)语法使用表格来对齐图像。这是支持一些Markdown口味(也支持纺织,如果这浮动你的船):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

or

| ![Flowers](/flowers.jpeg) | I am text to the right |

这不是最灵活的解决方案,但它适合我的大多数简单需求,易于阅读的markdown格式,你不需要记住任何CSS或原始HTML。

在警告框内,将图像和文本作为单个块中的段落的一部分并排对齐。

<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%;  float:right; padding:0.7em"/>
<b>isomorphism</b>  &rarr;  In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>

输出:

我有一个替代方法上面使用ALT标签和CSS选择器在ALT标签…相反,添加这样的URL散列:

首先你的Markdown图像代码:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

注意添加的URL哈希#中心。

现在在CSS中添加这个规则,使用css3属性选择器来选择具有特定路径的图像。

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

您应该能够像定义类名一样使用URL散列,而不是像某些人评论的解决方案那样滥用ALT标记。它也不需要任何额外的扩展。为左右浮动也做一个,或者任何你想要的样式。

我认为最简单的解决方案是直接指定align="right":

<img align="right" src=/logo.png" alt="logo" width="100"/>