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 你们的老婆新垣结衣

怎么样，你们的老婆好看吗，哦不，排版好看吧，嘻嘻。

CSDN博客排版技巧(MarkDown+HTML)-图片排版-同一行插入多张图片

CSDN博客排版技巧(MarkDown + HTML) - 图片排版 - 同一行插入多张图片

目录

同一行插入多张图片

代码

效果

一行就是一个图片

代码

效果

猜你喜欢