1. 我的发现过程
中午在吃过午餐后, 休息是无意中看到了@winniex的文章绘本6：Jeremy Draws a Monster 杰里米画了个小怪物问中图片的排版方式
因为正好是做web前端的所以明白这样排版的原理.顺手看了下代码.
正是代码中的pull-left的样式效果让图片居做显示了.
我查看了所以的文章pull-left都来自于图中的文件app-68c9467577b434888796.css, 这个文件的作用就是产生我们看到的页面效果.
进入到这个文件中发现这一段样式代码, 这些代码就控制我们用markdown写文章的样式.
.Markdown {
font-family: 'Source Serif Pro', serif;
font-size: 120%;
line-height: 150%; }
.Markdown.MarkdownViewer--small {
font-family: inherit;
font-size: 110%; }
.Markdown.MarkdownViewer--small img {
max-width: 400px;
max-height: 400px; }
.Markdown.MarkdownViewer--small div.videoWrapper {
max-width: 480px;
padding-bottom: 270px; }
.Markdown, .ReplyEditor__body.rte {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none; }
.Markdown h1, .Markdown h2, .Markdown h3, .Markdown h4, .Markdown h5, .Markdown h6, .ReplyEditor__body.rte h1, .ReplyEditor__body.rte h2, .ReplyEditor__body.rte h3, .ReplyEditor__body.rte h4, .ReplyEditor__body.rte h5, .ReplyEditor__body.rte h6 {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600; }
.Markdown h1, .ReplyEditor__body.rte h1 {
margin: 2.5rem 0 .3rem;
font-size: 160%; }
.Markdown h2, .ReplyEditor__body.rte h2 {
margin: 2.5rem 0 .3rem;
font-size: 140%; }
.Markdown h3, .ReplyEditor__body.rte h3 {
margin: 2rem 0 0.3rem;
font-size: 120%; }
.Markdown h4, .ReplyEditor__body.rte h4 {
margin: 1.5rem 0 0.2rem;
font-size: 110%; }
.Markdown h5, .ReplyEditor__body.rte h5 {
margin: 1rem 0 0.2rem;
font-size: 100%; }
.Markdown h6, .ReplyEditor__body.rte h6 {
margin: 1rem 0 0.2rem;
font-size: 90%; }
.Markdown code, .ReplyEditor__body.rte code {
padding: 0.2rem;
font-size: 85%;
border-radius: 3px;
border: none;
background-color: #F4F4F4;
font-weight: inherit; }
.Markdown pre > code, .ReplyEditor__body.rte pre > code {
display: block; }
.Markdown strong, .ReplyEditor__body.rte strong {
font-weight: 600; }
.Markdown ol, .Markdown ul, .ReplyEditor__body.rte ol, .ReplyEditor__body.rte ul {
margin-left: 2rem; }
.Markdown table td, .ReplyEditor__body.rte table td {
word-break: normal; }
.Markdown p, .ReplyEditor__body.rte p {
font-size: 100%;
line-height: 150%;
margin: 0 0 1.5rem 0; }
.Markdown img, .ReplyEditor__body.rte img {
width: auto;
max-width: 100%;
height: auto;
max-height: none; }
.Markdown iframe, .ReplyEditor__body.rte iframe {
max-width: 100%;
max-height: 75vw; }
.Markdown div.pull-right, .ReplyEditor__body.rte div.pull-right {
float: right;
padding-left: 1rem;
max-width: 50%; }
.Markdown div.pull-left, .ReplyEditor__body.rte div.pull-left {
float: left;
padding-right: 1rem;
max-width: 50%; }
.Markdown div.text-justify, .ReplyEditor__body.rte div.text-justify {
text-align: justify; }
.Markdown div.text-right, .ReplyEditor__body.rte div.text-right {
text-align: right; }
.Markdown div.text-center, .ReplyEditor__body.rte div.text-center {
text-align: center; }
.Markdown div.text-rtl, .ReplyEditor__body.rte div.text-rtl {
direction: rtl; }
.Markdown div.videoWrapper, .ReplyEditor__body.rte div.videoWrapper {
width: 100%;
height: 0;
padding-bottom: 56.2%;
position: relative; }
.Markdown div.videoWrapper iframe, .ReplyEditor__body.rte div.videoWrapper iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0; }
前面的pull-left的代码效果也在其中, 而且还有一个pull-right的效果
.Markdown div.pull-right, .ReplyEditor__body.rte div.pull-right {
float: right;
padding-left: 1rem;
max-width: 50%; }
.Markdown div.pull-left, .ReplyEditor__body.rte div.pull-left {
float: left;
padding-right: 1rem;
max-width: 50%; }
2. 如何使用
图片居左显示, 在
markdown编辑器中<div class="pull-left"> 直接放图片链接 </div>图片居右显示
<div class="pull-right"> 直接放图片链接 </div>另外还可以
text-justify,text-right,center可以设置文字的对其方式, 只需将上面的pull-right替换即可.
3. 建议
偶尔一两张图片可以有这种方法, 多了反而会导致页面变乱,而且不好控制, 这也是为什么没有这个的原因.
markdown的出现就是为了让我们能更专注在内容上面. 我们始终记住内容再是根本.