HTML中将图片横排排列的代码怎么写
将多张图片做成并排的样式，可以使用浮动，也可以使用定位，根据不同的环境使用不同的代码，今天我们使用常用的浮动来做这种并排的效果。
如图；建立几张图片，然后每张图片都用一个div小盒子包含，在4个盒子外面是最大的一个盒子；这样boss盒子就可以控制里面的小盒子了
如果这样带入图片，显示的效果是这样的；四张图片因为是在块状标签里面，所以是竖排排列的
现在对大盒子以及里面的图片进行简单的一点修饰；设置宽高，添加描边
现在效果是这样的
然后对div添加上浮动标签float:left；
这时候图片就发生变化了，竖排变成横排了，因为浮动的原因，最外面的边框仅剩一条线了，如图
需要将其浮动清除对下面的影响，在父级boss中添加个overflow:hidden;就可以了；然后在每个图片上添加些外边缘，将图片隔开
最后的效果就是这样的，如图
绛旓細灏嗗寮鍥剧墖鍋氭垚骞舵帓鐨勬牱寮忥紝鍙互浣跨敤娴姩锛屼篃鍙互浣跨敤瀹氫綅锛屾牴鎹笉鍚岀殑鐜浣跨敤涓嶅悓鐨勪唬鐮锛屼粖澶╂垜浠娇鐢ㄥ父鐢ㄧ殑娴姩鏉ュ仛杩欑骞舵帓鐨勬晥鏋溿傚鍥撅紱寤虹珛鍑犲紶鍥剧墖锛岀劧鍚庢瘡寮犲浘鐗囬兘鐢ㄤ竴涓猟iv灏忕洅瀛愬寘鍚紝鍦4涓洅瀛愬闈㈡槸鏈澶х殑涓涓洅瀛愶紱杩欐牱boss鐩掑瓙灏卞彲浠ユ帶鍒閲岄潰鐨勫皬鐩掑瓙浜 濡傛灉杩欐牱甯﹀叆鍥剧墖锛屾樉绀虹殑鏁堟灉鏄繖...
绛旓細鍙互浣跨敤CSS鐨刦loat灞炴у疄鐜锛屽彧瑕佺粰姣忓紶鍥剧墖璁剧疆 float:left; 锛岃繖鏍峰浘鐗囧氨浼氫粠宸﹀悜鍙虫诞鍑猴紝涓琛屾帓婊℃晥鏋滃氨鍑烘潵浜嗐傚彟澶栬繕鍙互璁剧疆涓浜沵argin锛岀敤浜庤鍥剧墖鏈夊悎鐞嗙殑闂撮殧銆
绛旓細<img src='XXX' / style='float:left'><img src='XXX' / style='float:left'>
绛旓細鏄庢槑鏄簲璇ョ敤<table><tr><td><img src="鍥剧墖鏂囦欢"></td><td><img src="..."></td><td><img src="..."></td>...</tr>濡傛灉浣犺娣诲姞鍥剧爜锛屽鎮ㄧ殑鍥剧墖鏂囦欢杩涜鍔犲瘑鐨勮瘽锛屽彲浠ヤ负鍥剧墖鐨瀵煎叆杩涜id璁剧疆锛屽垏蹇屼笉瑕佸鎯冲簲鐢╟lass鎴杝rc绛夊睘鎬у鍥剧爜杩涜璁惧畾锛屽洜涓鸿繖涓や釜灞炴ф槸鏃犳硶鏀瑰彉鐨勫畾鍊笺
绛旓細float:left;" ><ahref='list_11_2.html'>2</a></li><li style="float:left;" ><ahref='list_11_2.html'>涓嬩竴椤</a></li><li style="float:left;" ><ahref='list_11_2.html'>鏈〉</a></li><li style="float:left;" ><selectname='sldd'style='width:34px'...
绛旓細鍥犱负浣犵敤鐨勬ā鏉匡紝浼犵殑鏄竴涓猘rray锛屾瘡寰幆涓娆＄敓鎴愪竴涓狣IV锛屾墍浠ヨ鎶寰幆寮濮<!-- BEGIN nameArr.Name -->鏀惧湪<div class = "userList">鍓嶉潰锛屾敼鎴愯繖鏍 === html锛<div class="showUser"> <fieldset> <legend>淇变箰閮ㄦ垚鍛</legend> <!-- BEGIN nameArr.Name --> <div class = "userLis...
绛旓細鍙互璁li涔嬮棿娌℃湁涓涓粯璁ょ殑绌烘牸 */ </ul> </div> </div> </body></html>li.css 鏂囦欢浠ｇ爜濡備笅锛歝s { background-image:url(admin.png);width:1003px;height:78px;} ul { text-align: left; /* 瀵箄l浣跨敤宸﹀榻 */ padding: 0.15em 0 1px 0;} li { disp...
绛旓細div div img+p+p div div img+p+p div div
绛旓細寰堝鍥炵瓟閮芥槸璁剧疆float灞炴ф潵鎺掑垪锛屽叾瀹炲彲浠ヤ粠灞炴т箣澶栫殑鏂归潰璁剧疆銆傞壌浜巐i鍏冪礌鏄潡鐘跺厓绱狅紝鎵浠ュ厓绱犱笌鍏冪礌涔嬮棿鎵嶄細鎹㈣锛岀幇鍦ㄥ彧瑕鎶li鍏冪礌鍙樻垚鍏冪礌涔嬮棿鍙互鍚岃鐨勫唴鑱斿潡鐘跺厓绱犲氨琛屼簡銆傚叿浣浠ｇ爜濡備笅锛歭i{ display锛歩nline-block锛泒
绛旓細鍏堢敤div+css灏嗗垎鍧楁樉绀哄啓鍙凤紝璇诲嚭浣犵殑鏁版嵁锛屽惊鐜樉绀猴紝鐒跺悗锛屽湪鍒嗗潡鐨刢ss绫婚噷涓姞float:left;left 鍏冪礌鍚戝乏娴姩銆 right 鍏冪礌鍚戝彸娴姩
