CSDN部落格排版技巧(MarkDown + HTML) - 圖片排版 - 同一行插入多張圖片

目錄

• CSDN部落格排版技巧(MarkDown + HTML) - 圖片排版 - 同一行插入多張圖片
  • 目錄
  • 同一行插入多張圖片
    • 程式碼
    • 效果
  • 一行就是一個圖片
    • 程式碼
    • 效果

同一行插入多張圖片

• 實現方法如下程式碼，使用 HTML 語法，讓圖片包括在 <table> 標籤裡面，同時也可以加入圖片標題，簡直就是 CSDN 部落格圖片排版（強迫症）的福音。<tr>表示 table row, <td>表示table data, 要新建一個圖片行，再加入一對<tr>標籤，然後把圖片放在<td>裡<img src="圖片地址">就行了。這裡捨棄了 MarkDown 坑爹的圖片排版邏輯![圖片描述](圖片地址)，使用 HTML 的圖片排版邏輯，在CSDN的 MarkDown 編輯器 中也是同樣適用的。同時瀏覽器會自動縮放圖片的大小
  ，不用自己設定<img>的width和height屬性，實在方便不少。之所以用到了<center>標籤是為了讓圖片能在表格的單元格里居中。
• 雖然瀏覽器會自己適應圖片的大小，但是建議還是不要刁難瀏覽器，最好保證同一行的兩個圖片的尺寸相差不大，不然會有很醜的後果。

程式碼

<table>
    <tr>
        <td ><center><img src="https://img-blog.csdn.net/20180731150122598?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" >圖1  新垣結衣1 </center></td>
 

        <td ><center><img src="https://img-blog.csdn.net/20180731150122598?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"  >圖2 新垣結衣1</center></td>
    </tr>

    <tr>
        <td><center><img src="https://img-blog.csdn.net/20180731150144421?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"  >圖3 新垣結衣2</center></td>
        <td ><center><img src="https://img-blog.csdn.net/20180731150144421?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"  >圖4 新垣結衣2</center> </td>
    </tr>

    <tr>
        <td><center><img src="https://img-blog.csdn.net/20180731150154296?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"   > 圖5 新垣結衣3</center></td>
        <td><center><img src="https://img-blog.csdn.net/20180731150154296?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"  > 圖6 新垣結衣3</center></td>
    </tr>
</table>

效果

下面就用你們的老婆來做示範。

圖1 新垣結衣1	圖2 新垣結衣1
圖3 新垣結衣2	圖4 新垣結衣2
圖5 新垣結衣3	圖6 新垣結衣3

怎麼樣，是不是很美呢這個排版！並且在手機裡看，圖片也能適應手機螢幕，看起來很舒服。

一行就是一個圖片

• 還是同樣的道理，為了風格統一，我們也用<table>標籤，但是這裡需要注意的是，為了能使圖片標題也居中，這裡將圖片標題也放在了另外一個獨立的<center>裡面了，若是放在圖片的<center>裡，會迷之不對齊，目前不知道為啥會這樣，可能 CSDN 的編輯器有點奇怪吧。
• 一開始我還想自己設定一個圖片<img>的height和width屬性的，後來發現不同裝置的相容性比較差，可能電腦看得很舒服，手機看著難受，還是最好別用這兩個屬性把，讓瀏覽器自動去適應會好一些。

程式碼

<table>
    <tr>
        <td><center>
        <img src="https://img-blog.csdn.net/20180731152356880?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" />
        </center>
        <center>
        圖7 K-means演算法流程圖
        </center></td> 
    <tr>
</table>

效果

圖7 你們的老婆新垣結衣

怎麼樣，你們的老婆好看嗎，哦不，排版好看吧，嘻嘻。