Markdown裏的圖片並排顯示

最近寫文章的時候發現,在markdown裏插入一些很長的圖片的時候,會顯得很不好看,於是去查了一下如何實現markdown裏圖片的並排顯示,參考了下面博客內的內容,方法如下:

1. 單張居中顯示:

<center>
    <img src="http://dreamofbook.qiniudn.com/Zero.png">
</center>

OR

<figure>
    <img src="http://xxx.jpg">
</figure> 

2. 固定圖片寬度/高度:

<img src="http://xxx.jpg" title="Logo" width="100" /> 

寬度是 Width,高度是 High。Title 爲圖片描述。

3. 兩張並排顯示:

<figure class="half">
    <img src="http://xxx.jpg">
    <img src="http://yyy.jpg">
</figure>

4. 三張並排顯示:

<figure class="third">
    <img src="http://xxx.jpg">
    <img src="http://yyy.jpg">
    <img src="http://zzz.jpg">
</figure>

5. 固定寬度,並排顯示並居中

就是把上面的幾個例子合起來,下面給出代碼

<center class="half">
    <img src="http://xxx.jpg" width="300"/>
    <img src="http://yyy.jpg" width="300"/>
</center>

原文鏈接:https://blog.csdn.net/WMN7Q/article/details/73138326

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章