1打开dreamweaver软件，插入多张图片2点击上方的菜单选择，弹出对话框属性面板3图片编辑顺序选择横竖排列图片方式即可；1首先要排列的四张照片放置到同一个文件夹中，并打开电脑中运行html的软件2其次点击界面中的文件编辑栏，选择排列，点击浮点排列3最后在弹出的页面中，点击四张图片，并将排列行数设定为两行即可；例如一个div元素3为该容器元素添加CSS样式，设置display属性为flex，这将启用Flexbox布局4可以添加marginright属性到每个图片元素上，以增加间距5最后，保存并预览HTML文件，将会看到图片横向排列的效果。

1新建html文档2书写hmtl代码 lt！ 横向排列 ， ltdiv id=quotnavquot，ltdiv id=quotbox1quot1ltdiv，ltdiv id=quotbox2quot2ltdiv，ltdiv id=quotbox3quot3ltdiv，ltdiv3初始化css代码ltstyle；=== htmlltdiv class=quotshowUserquot ltfieldset ltlegend俱乐部成员ltlegend lt！ BEGIN nameArrName ltdiv class = quotuserListquot ltpltp ltplta href=quotindexphp？id=uidquotuserNameltalt；首先创建一个大的div包含起来，然后设置宽和高，之后使用img标签将图片引入，然后设置图片的宽和高，也可以设置图片的float属性浮动属性；6第六步，执行完上面的操作之后，设置图片的大小，宽度为280px，高度为200px 为了使用图片的水平排列，需要使用float属性设置图片浮动的统一方向，见下图，转到下面的步骤7第七步，执行完上面的操作之后，在浏览器。

第一种方法 添加一个DIV，采用绝对定位，图片所属DIV为基准 ltdiv style=quotpositionrelativewidth100pxheight100pxquot ltimg src=quotquot alt=quotquot ltdiv style=quotpositionabsolutewidth100pxheight100pxz；一是用表格元素，对每张图片进行定位lttablelttr lttdltimg src=pic1jpg border=0lttd lttdltimg src=pic2jpg border=0lttd lttrlttable 二使用有序列表ltliltli列表，通过自定义样式实现；就可以让图片在显示的时候并列排成一排，图片与图片之间无缝连接div元素是后断行，前不断行，span元素是前后都不断行ul，ol，dd，dt，li，h1，h2，h3，h4，h5，h6，p元素是前后都断行，a，img我个人认为他默认的排列方式；如图建立几张图片，然后每张图片都用一个div小盒子包含，在4个盒子外面是最大的一个盒子这样boss盒子就可以控制里面的小盒子了 如果这样带入图片，显示的效果是这样的四张图片因为是在块状标签里面，所以是竖排排列的。

6在css标签内，设置图片的的大小，宽度为280px，高度为200px，为了使用图片水平排列，需要使用float属性设置图片浮动的统一方向，例如，这里设置统一浮动向左7在浏览器打开testhtml文件，查看图片水平排列的效果；这个简单啊，直接在html中使用多个img标签导入多个图片即可，因为img是行内元素，只要外盒子的宽足够，那么导入的图片就会是一排；1在敲代码前，先想好结构，最后先在纸上画出一个结构在此例中，可以将其分为一个整体的三部分，上左右部分，最上方为标题栏，下面左侧可以放置图片，右侧是文字搭配然后我们打开DW，新建HTML文件，然后在body标签下；ltdiv class=quotimgboxquot ltimg src=quotquotltimg src=quotquotltdiv代码如上所示，图片默认是竖直排列，你想要的应该是水平横排列，只需要在css中添加如下样式 imgboxoverflowhiddenimgbox imgfloatleft其中第一个。