devbox
代码架构师
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   PHOTOSHOP > 正文

降价和图像对齐

作者：代码架构师 | 2023-03-13 19:51:32

赞

踩

html,css,markdown,编辑器,git,php,python,程序员,服务器,go,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我正在建立一个每月发布问题文章的网站.它很简单,我认为使用Markdown编辑器(就像Stack Overflow中的WMD一样)将是完美的.

但是,他们确实需要能够在给定段落中对齐图像.

我无法通过当前系统看到这样做的方法 - 有可能吗？



1> Greg Hewgill..：

您可以在Markdown中嵌入HTML,因此您可以执行以下操作:



Continue markdown text...

通过strippnig不必要的`div`来清理和标准化,并分别在`img`标签上添加一个斜线,即`
对于像GitHub这样的一些清理过的解释器,这项工作更好:
@MattDiPasquale没有必要关闭斜杠.这是XHTML,而不是HTML.

2> gerwitz..：

许多Markdown"额外"处理器支持属性.所以你可以包含类似的类名(PHP Markdown Extra):

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

或者,(Maruku,Kramdown,Python Markdown):

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

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

.callout {
    float: right;
}

如果您的语法支持这种语法,它将为您提供两全其美的优势:无嵌入式标记,以及足以不需要由内容编辑器修改的样式表摘要.

("没有理由"当然过于简化.有许多用户体验原因可能要求你的编辑要么离最终的HTML呈现更近或更远.或者你可能不愿意在你的内容中引入HTML依赖性,如果你选择Markdown来抽象渲染技术.)

3> OzzyCzech..：

我在纯Markdown中找到了一个很好的解决方案,带有一点CSS 3 hack :-)

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

在左边或右边跟随CSS 3代码浮动图像,当image alt结束时带<或>.

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

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

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



4> tremor..：

我有一个替代上面使用ALT标记和alt标记上的CSS选择器的方法...而是添加这样的URL哈希:

首先是你的Markdown图像代码:

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

请注意添加的URL哈希#center.

现在使用CSS 3属性选择器在CSS中添加此规则,以选择具有特定路径的图像.

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

您应该能够使用像这样的URL哈希,就像定义类名一样,并不像有些人对该解决方案所评论的那样滥用ALT标记.它也不需要任何额外的扩展.做一个左右浮动或你可能想要的任何其他样式.



5> 小智..：

嵌入CSS很糟糕:

![Flowers](/flowers.jpeg)

另一个文件中的CSS:

img[alt=Flowers] { float: right; }

什么？现在,每次更改降价内容时,您都必须编辑外部文件？对我来说听起来不是一个好的解决方案.
@cboettig这是严重滥用alt标签.对于无法看到图像的人来说,它应该是图像的文字描述.
@JordanReiter这里的每个人都编写了一个程序,该程序由多个文件组成,其中逻辑在许多位置传播/组织.我们是为了可维护性而故意这样做的.为什么这么痛苦和非常不同？
Markdown允许非程序员用户创建内容,它不应该依赖于必须在服务器上直接访问和编辑的文件.另一个例子:我认为将数据库中字段的*名称*硬编码到代码中是完全正常的,但是根据数据库中字段的*值*进行硬编码是错误的(即`if product.name =='郁金香')因为你不能依赖于价值的稳定性.所有需要的是有人将"鲜花"改为"鲜花",突然间,图像突然出现在视野之外.此外,他们每次添加图像时都必须给您打电话!
令我惊讶的是,很多人都在为这个解决方案而哭泣.这是一个美丽的黑客,是解决某些托管服务问题所必需的.给这个漂亮的黑客的海报现在已经消失,而社区则留下了哭泣的东西.
对于那里的顺应性怪胎，请使用`！[我非常有用的替代文字-right]`和`img [alt $ =“-right”] {float：right}`。这样一来，您最终会获得100％兼容的Markdown，HTML，禁用增强的XHTML5，并且上帝知道。
克里斯托夫:请看Nathan Grigg的评论,理解为什么这是一个坏主意.您正在将显示信息与您的数据混合,这很糟糕,但您也是以一种实际上对悬停或使用基于文本的浏览器的用户可见的方式进行操作.

6> learnvst..：

我喜欢通过使用表格将图像与垂直管道(|)语法对齐来超级懒惰.一些Markdown口味支持这一点(如果漂浮你的船,也支持纺织品):

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

要么

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

它不是最灵活的解决方案,但它对我的大多数简单需求都有好处,易于以降价格式阅读,而且您不需要记住任何CSS或原始HTML.

这是一个有趣的黑客,但它滥用表格布局.欢迎来到1999年.
我刚刚在GitHub上尝试了这种语法,它现在似乎正常工作.
对于github风格的markdown,添加一行"| - | - |`.它告诉解析器有一个表,第一行是标题.例如:http://goo.gl/xUCRiK
我喜欢这种风格,非常喜欢降价.太糟糕了,它无法在github上运行(至少还没有.)

7> ma11hew28..：

更p#given img { float: right }简洁的只是放入样式表,或者包含在style标签中.然后,只需使用降价![Alt text](/path/to/img.jpg).



8> 小智..：

    ![book](/images/book01.jpg)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/PHOTOSHOP/detail/15441
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。