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

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

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


当前回答

我喜欢learnvst使用表格的答案,因为它是相当可读的(这是编写Markdown的一个目的)。

然而,在GitBook的Markdown解析器的情况下,除了一个空标题行,我还必须在它下面添加一个分隔行,以使表能够被识别并正确呈现:

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

分隔线至少需要包含三个破折号——。

其他回答

正如greg所说,你可以在Markdown中嵌入HTML内容,但Markdown的要点之一是避免必须有广泛的(或任何,就此而言)CSS/HTML标记知识,对吗?这就是我所做的:

在我的Markdown文件中,我简单地指示我所有的wiki编辑将所有图像嵌入包装,看起来像这样:

'<div> // Put image here  </div>`

(当然. .他们不知道<div>意味着什么,但这并不重要)

所以Markdown文件看起来是这样的:

<div>
![optional image description][1]
</div>

[1]: /image/path

在CSS内容包装整个页面,我可以做任何我想对图像标签:

img {
   float: right;
}

当然你可以用CSS内容做更多的事情…(在这种特殊情况下,用div包装img标签可以防止其他文本对图像进行包装……虽然这只是一个例子),但IMHO Markdown的重点是你不希望潜在的非技术人员进入CSS/HTML的里里外外。这是由你作为一个web开发人员,使你的CSS内容包装的页面尽可能一般和干净,但你的编辑不需要知道这一点。

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

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

or

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

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

我喜欢learnvst使用表格的答案,因为它是相当可读的(这是编写Markdown的一个目的)。

然而,在GitBook的Markdown解析器的情况下,除了一个空标题行,我还必须在它下面添加一个分隔行,以使表能够被识别并正确呈现:

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

分隔线至少需要包含三个破折号——。

我发现了一个很好的解决方案在纯Markdown与一个小css3 hack:-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

当图像alt以<或>结束时,遵循css3代码浮动图像在左侧或右侧。

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

你可以直接使用align属性:

<img align="right" width="100" height="100" src="https://images.unsplash.com/photo-1650620109005-099c2de720f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">