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

同一行插入多张图片

实现方法如下代码，使用 HTML 语法，让图片包括在 <table> 标签里面，同时也可以加入图片标题，简直就是 CSDN 博客图片排版（强迫症）的福音。<tr>表示 table row, <td>表示table data, 要新建一个图片行，再加入一对<tr>标签，然后把图片放在<td>里<img src="图片地址">就行了。这里舍弃了 MarkDown 坑爹的图片排版逻辑[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6xbfATva-1588292883164)(图片地址)]，使用 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>

效果

下面就用你们的老婆来做示范。

<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/20180731150952471?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"> 图6 新垣结衣3</center></td>
</tr>

图1 新垣结衣1

图2 新垣结衣1

怎么样，是不是很美呢这个排版！并且在手机里看，图片也能适应手机屏幕，看起来很舒服。

一行就是一个图片

还是同样的道理，为了风格统一，我们也用<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排版怎么一行两张图相关推荐

如何使用latex排版并排放置两张图
注意:使用宏包\usepackage{graphicx}和\usepackage{subfigure}.插入代码如下: \begin{figure} \begin{minipage}[t]{0.5\l ...
python把两张图不同之处差异显示出来
把两张图不同之处差异显示出来原讨论帖, https://bbs.csdn.net/topics/396114473 最后找到了帖子的原帖, https://www.cnblogs.com/botoo ...
LaTeX两张图并排显示
一.需要引入的包 \usepackage{caption} % 图片脚注 \usepackage{graphicx} \usepackage{caption} \usepackage{subfigur ...
OpenCV学习笔记——判断两张图的相似度
判断两张图的相似度方法直方图对比法 ORB算法实验 1.直方图对比法参考如何使用OpenCV3直方图方法进行人脸相似度对比因为我的环境是VS2010+OpenCV2.4.8,所以在原版的基础 ...
Python笔记-使用SSIM找两张图不同及使用Opencv显示
运行截图如下: 这里有几点要注意的: ①对比两张图片的函数SSIM具体是structural_similarity: Ⅰ:第一个参数和第二个参数是要对比的两张图片: Ⅱ:参数中有个full,默认为Tr ...
Android 应用性能优化（5）---用两张图告诉你，为什么你的App会卡顿?
用两张图告诉你,为什么你的App会卡顿? Cover 有什么料? 从这篇文章中你能获得这些料: 知道setContentView()之后发生了什么? 知道Android究竟是如何在屏幕上显示我们期望的 ...
MATLAB代码：合并两张图
MATLAB 合并两张图,要求大小相同的图,我这里合并两张相同的图. image = imread('docia_one.png') %读取图片 c = [image, image] %图像拼接到矩阵 ...
两张图搞定IJK源码
IJK源码两张图就可以搞定,一张是IJK从播放到停止的代码流程图,一张是IJK的线程模型图
Origin使两张图重叠展示在一张图上
目录 1.先将两张图的坐标轴修改为相同. 2.删去其中一个图的图例.坐标轴等,仅保留曲线.左轴和下轴的刻度线标签.轴线和刻度线均把显示关闭.并用Delete删去坐标轴名称. 3.选中图形,Ctrl+C ...

csdn排版怎么一行两张图

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

目录

同一行插入多张图片

代码

效果

一行就是一个图片

代码

效果

csdn排版怎么一行两张图相关推荐

最新文章

热门文章