html 中如何实现，如图所示图片排列 如何实现html 图片排列 类似这种效果

\u600e\u4e48\u8bbe\u7f6ecss,\u628a\u653e\u5728\u4e00\u4e2adiv\u4e2d\u7684\u56fe\u7247\u6a2a\u7740\u6392\u5217

1\u3001\u9996\u5148\uff0c\u5982\u56fe\u6240\u793a\uff0c\u6211\u5728html\u4e2d\u653e\u7f6e\u4e86\u4e24\u4e2aiframe\u6807\u7b7e\uff0c\u6ca1\u6709\u989d\u5916\u7684\u8bbe\u7f6e\u3002\u5982\u679c\u6d4f\u89c8\u5668\u76f4\u63a5\u6253\u5f00\uff0c\u60a8\u53ef\u4ee5\u770b\u5230iframe\u6807\u7b7e\u9ed8\u8ba4\u662f\u6c34\u5e73\u6392\u5217\u7684\u3002

2\u3001\u5982\u679c\u6211\u5c06\u8fd9\u4e24\u4e2aiframe\u6807\u7b7e\u653e\u5728div\u6807\u7b7e\u4e2d\uff0c\u6211\u53ef\u4ee5\u770b\u5230div\u6807\u7b7e\u9ed8\u8ba4\u5782\u76f4\u6392\u5217\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0cdiv\u6807\u7b7e\u4f1a\u586b\u5145\u4e00\u884c\u3002

3\u3001\u4f7f\u7528css\u5c06\u4e24\u4e2adiv\u6807\u7b7e\u7684float\u8bbe\u7f6e\u4e3aleft\u3002\u5728\u6b64\u8bbe\u7f6e\u4e4b\u540e\uff0c\u4e24\u4e2a\u6807\u7b7e\u6c34\u5e73\u6392\u5217\u3002\u6ce8\u610f\u4e24\u4e2adiv\u540e\u9762\u7684\u6807\u7b7e\u7ee7\u7eed\u6392\u5217\u5728\u8fd9\u4e00\u884c\u4e2d\uff0c\u56e0\u4e3a\u9ed8\u8ba4\u7684div\u6807\u7b7e\u4e0d\u4f1a\u901a\u8fc7\u4f7f\u7528float\u6765\u5360\u7528\u9ad8\u5ea6\u3002

4\u3001\u89e3\u51b3\u65b9\u6848\u662f\u5728\u7236div\u6807\u7b7e\u4e0a\u653e\u7f6e\u4e24\u4e2adiv\u6807\u7b7e\uff0c\u7136\u540e\u5c06\u7236\u6807\u7b7e\u7684\u6ea2\u51fa\u8bbe\u7f6e\u4e3ahidden\u3002

5\u3001\u4f7fdiv\u6807\u7b7e\u6c34\u5e73\u663e\u793a\u7684\u53e6\u4e00\u79cd\u65b9\u6cd5\u662f\u5c06\u5176\u663e\u793a\u6837\u5f0f\u8bbe\u7f6e\u4e3a\u5185\u8054\u5757\u3002

6\u3001\u65e0\u8bba\u6c34\u5e73\u6392\u5217\u5982\u4f55\uff0c\u5f53\u6d4f\u89c8\u5668\u5bbd\u5ea6\u592a\u7a84\u65f6\uff0c\u5b83\u4f1a\u81ea\u52a8\u6298\u53e0\uff0c\u5c31\u597d\u50cf\u5b83\u662f\u5782\u76f4\u6392\u5217\u7684\u4e00\u6837\u3002

\u4e24\u4e2adiv\u5c31\u89e3\u51b3\u95ee\u9898\u4e86\u5440\uff0c\u5de6\u8fb9\u4e00\u4e2a\u53f3\u8fb9\u4e00\u4e2a\uff0c\u540c\u884c\u6709\u4e24\u5f20\u56fe\u7247\u7684\u91c7\u7528\u6362\u884c\u5c31\u53ef\u4ee5\u4e86

这个应该是比较好弄的。
你让它们都float:left了是吧。你知道float这个样式就好说多了。你可以把中间那三个图片放到一个<div>里，把最左边和最右边那个图片也分别放到<div>里，之后给这三个DIV加float:left应该就好了。
如果没说明白或是没听懂的话，再HI我好了。

一定要用表格 比如你现在这个有5个图片 你用DW软件 插入歌3行3列的表格 然后第一列 和第三列都合并单元格 ，把图片按照顺序放入各个<TD></TD>里 设置好大小。。个人建议先学习下HTML的表格 再弄 或者高深一点的学习下DIV+css。。

还有一种方式 就是一整张图片 用PS的切片工具切出你想要的图片形式，直接生产网页就行了

简单点用表格，定好宽度就好了

扩展阅读：javascript 在线 ... html中轮播图怎么做 ... javascript实现轮播图 ... html 动画实现轮播图 ... html中submit实现跳转 ... html网页轮播图怎么弄 ... 轮播图代码html css ... 轮播图是如何实现的 ... html中如何实现图片排版 ...