html+css实现横排显示一系列图片，超出框格的自动换到下一行 内容超出div宽度后自动换行的css代码
DIV+CSS\u600e\u4e48\u8ba9\u56fe\u7247\u6a2a\u5411\u6392\u5217\u81ea\u52a8\u6362\u884c\u6807\u7b7e\u662f\u9ed8\u8ba4\u6362\u884c\u7684\uff0c\u4f60\u53ef\u4ee5\u9009\u62e9\u7528\u8868\u683c\u5b9e\u73b0\uff0c\u4e5f\u53ef\u4ee5\u9009\u62e9\u7528JS\u5c06\u5947\u6570\u5217\u6b63\u5e38\u663e\u793a\uff0c\u5076\u6570\u5217\u7684\u6d6e\u52a8\u5230\u53f3\u4fa7\u8bd5\u8bd5\u3002
\u4f7f\u7528\u4e00\u6bb5css\u4ee3\u7801\uff1a\u201dword-wrap: break-word;word-break: break-all;overflow: hidden;\u201c\u3002
\u5b9e\u4f8b\u6f14\u793a\u5982\u4e0b\uff1a
1\u3001\u8bbe\u8ba1\u4e24\u4e2a\u5bb9\u5668\uff0c\u653e\u5165\u4e00\u4e9b\u6587\u5b57\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a
\u6b64\u65f6\u7684\u9875\u9762\u5c55\u793a\u5982\u4e0b\uff1a\uff08\u5747\u4e3a\u6362\u884c\uff09
2\u3001\u4fee\u6539\u4e24\u4e2a\u5bb9\u5668\u7684\u6837\u5f0f\uff0c\u7ed9\u7b2c\u4e00\u4e2a\u5bb9\u5668\u52a0\u4e0a\u4e86\u5173\u952e\u4ee3\u7801\u5982\u4e0b\uff1a
\u6b64\u65f6\u7684\u9875\u9762\u5c55\u793a\uff08\u7b2c\u4e00\u4e2a\u5df2\u7ecf\u6362\u884c\uff09\uff1a
\u6269\u5c55\u8d44\u6599\uff1a
css\u8be6\u89e3\uff1a
\u4e00\u3001word-wrap: normal|break-word\uff08word-wrap \u5c5e\u6027\u5141\u8bb8\u957f\u5355\u8bcd\u6216 URL \u5730\u5740\u6362\u884c\u5230\u4e0b\u4e00\u884c\uff09\u3002
1\u3001normal \uff0c\u53ea\u5728\u5141\u8bb8\u7684\u65ad\u5b57\u70b9\u6362\u884c\uff08\u6d4f\u89c8\u5668\u4fdd\u6301\u9ed8\u8ba4\u5904\u7406\uff0c\u9ed8\u8ba4\u503c\uff09\u3002
2\u3001break-word\uff0c \u5728\u957f\u5355\u8bcd\u6216 URL \u5730\u5740\u5185\u90e8\u8fdb\u884c\u6362\u884c\u3002
\u4e8c\u3001word-break: normal|break-all|keep-all\uff08\u901a\u8fc7\u4f7f\u7528 word-break \u5c5e\u6027\uff0c\u53ef\u4ee5\u8ba9\u6d4f\u89c8\u5668\u5b9e\u73b0\u5728\u4efb\u610f\u4f4d\u7f6e\u7684\u6362\u884c\uff09\u3002
1\u3001normal\u4f7f\u7528\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7684\u6362\u884c\u89c4\u5219\u3002\uff08\u9ed8\u8ba4\u503c\uff09
2\u3001break-all\u5141\u8bb8\u5728\u5355\u8bcd\u5185\u6362\u884c\u3002
3\u3001keep-all\u53ea\u80fd\u5728\u534a\u89d2\u7a7a\u683c\u6216\u8fde\u5b57\u7b26\u5904\u6362\u884c\u3002
========================================
html：
<div class="showUser">
<fieldset>
<legend>俱乐部成员</legend>
<!-- BEGIN nameArr.Name -->
<div class = "userList">
<p> </p>
<p><a href="./index.php?id={uid}">{userName}</a></p>
<!-- IF avatar = "" -->
<p><a href="./index.php?id={uid}" ><img src = "/team5/v0.6/upload/_static/picture/avatar/default.jpg"></a></p>
<!-- ELSE -->
<p><a href="./index.php?id={uid}" ><img src = "/team5/v0.6/upload/_static/picture/avatar/{avatar}"></a></p>
<!-- ENDIF -->
</div>
<!-- END nameArr.Name -->
</fieldset>
<div class="clear"></div>
</div>
==========================================
css：
.showUser{
width:780px;
padding:10px;
}
.showUser legend {
margin-bottom:20px;
font-size:200%;
}
.userList{
margin-bottom:5px;
word-break:break-all;
word-wrap:break-word;
float:left;
}
.userList img {
margin:5px 19.5px;
border:4px solid #d7e1ed;
display:block;
}
.userList a {
margin:5px 19.5px;
color:#444;
text-decoration:none;
}
.userList a:hover {
color:#888;
text-decoration:none;
}
===========================================
function getName()
{
global $DB,$mysql_prefix;
$nameArr = array();
$con = mysql_connect("localhost", "root", "admin");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$db_selected = mysql_select_db("micblog",$con);
$sql = "SELECT `UID`, `AVATAR`, `USERNAME` FROM `WEIQU_USERINFO`";
$result = mysql_query($sql,$con);
while($Re = mysql_fetch_array($result))
{
$nameArr[] = array(
"uid" => strip_tags($Re['UID']),
"userName" => strip_tags($Re['USERNAME']),
"avatar" => strip_tags($Re['AVATAR']),
);
}
$return['Name'] = $nameArr;
return $return;
}
应该有设置你那个输出的图片的css的吧 或者你输出的时候加个DIV 然后在div上加上浮动，他就会横排，也会自动换行，要好看一点的话再加点margin什么的
实现你要的效果很简单的，你把外面的div宽度改大些。还有很简单的布局就可以实现你要的效果。思路：外面一个div，里面是img，设置img的宽度，高度，再有margin。搞定
1.利用Dreamweaver新建一个html页面
2.在body里面输入代码
<ul>
<li>你好</li>
<li>小鱼</li>
<li>小小</li>
</ul>
3.默认的样式是这样的
4编辑li标签的css样式
5float:left代表的是元素左对齐。这样li标签就可以横排显示了，list-style:none用来去除li标签前面的小圆点。最终浏览器里面的效果如下图所示
相当简单
<div style="width:100%">
<div class = "showUser" >
<div class = "userList"><a href="./index.php?id={uid}">{userName}</a><a href="./index.php?id={uid}" ><img src = "/team5/v0.4/src/upload/_static/picture/avatar/{avatar}"></a></div>
</div>
<div style="clear:both"></div>
</div>
绛旓細鐒跺悗璁剧疆瀵艰埅鏉＄殑li宸︽诞鍔紝骞朵笖鍘绘帀li鍓嶉潰鐨勫渾鐐癸紝璁╁鑸潯鏇村ソ鐪嬨傜劧鍚庤缃鑸潯鐨刟鏍囩杞潡绾э紝浠ュ強瀵艰埅鏉¤彍鍗曠殑瀹介珮锛屾枃瀛楅鑹诧紝姘村钩鍨傜洿灞呬腑鍜岃儗鏅壊浠ュ強鍘绘帀a鏍囩鐨勪笅鍒掔嚎銆傛帴鐫璁剧疆榧犳爣缁忚繃瀵艰埅鏉¤彍鍗曞彉鑹插嵆鍙傛渶鍚庯紝涓涓畬缇庣殑瀵艰埅鏉¤彍鍗曞氨瀹屾垚浜嗭紝绠鐩存槸澶畝鍗曚簡銆
绛旓細鍥犱负浣犵敤鐨勬ā鏉匡紝浼犵殑鏄竴涓猘rray锛屾瘡寰幆涓娆＄敓鎴愪竴涓狣IV锛屾墍浠ヨ鎶婂惊鐜紑濮<!-- BEGIN nameArr.Name -->鏀惧湪<div class = "userList">鍓嶉潰锛屾敼鎴愯繖鏍 === html锛<div class="showUser"> <fieldset> <legend>淇变箰閮ㄦ垚鍛</legend> <!-- BEGIN nameArr.Name --> <div class = "userLis...
绛旓細1銆佹墦寮鎵闇娴嬭瘯鐨勮蒋浠讹紝鍒涘缓涓涓柊鐨html 2銆佸啓鍏ヨ瀹炵幇鏁堟灉鐨勪唬鐮侊細3銆佸埄鐢css鏉ユ帶鍒妯帓灞曠ず锛4銆佸睍绀虹殑鏁堟灉涓猴細璇﹁Вcss锛氫富瑕佹槸鎺у埗li鏍囩鐨勯潬宸︽诞鍔細float:left锛涘綋鐒讹紝灞曠ず鍦ㄤ竴鎺掞紝闈犲彸娴姩涔熸槸鍙互鐨勶紝list-style-type:none; 鎰忔濇槸锛氬幓闄ゅ浘2灞曠ず鐨勫墠闈㈢殑鐐癸紱鑷充簬margi-right:20px锛涜li鏍囩...
绛旓細1銆佸埄鐢―reamweaver鏂板缓涓涓html椤甸潰銆2銆佸湪body閲岄潰杈撳叆浠ｇ爜 浣犲ソ 灏忛奔 灏忓皬 銆3銆侀粯璁ょ殑鏍峰紡鏄繖鏍风殑銆4銆佺紪杈憀i鏍囩鐨css鏍峰紡銆5銆乫loat:left浠ｈ〃鐨勬槸鍏冪礌宸﹀榻愩傝繖鏍穕i鏍囩灏卞彲浠妯帓鏄剧ず浜嗭紝list-style:none鐢ㄦ潵鍘婚櫎li鏍囩鍓嶉潰鐨勫皬鍦嗙偣銆
绛旓細璇存槑锛氳繖閲屼笉鑳芥妸琛ㄦ牸瀹藉害闄愬埗涓700PX锛屼笉鐒朵綘鐨勬诲搴︿笉澶熶簡銆傚缓璁负锛歸idth:auto;鎴栬咃細width:100%;
绛旓細绗竴姝ャ佺紪鍐妯悜鑿滃崟鐨HTML浠ｇ爜鏋舵瀯璇峰皢浠ヤ笅浠ｇ爜娣诲姞鍒癏TML鏂囨。鐨勫鑸爮鍖哄煙涓侭aidu.ComCode52.NetYahoo.Com鏍囩鑼冨洿涓#menu{font:12pxverdana,arial,sans-serif;/*璁剧疆鏂囧瓧澶у皬鍜屽瓧浣撴牱寮*/}#menu,#menuli{list-style:none;/*灏嗛粯璁ょ殑鍒楄〃绗﹀彿鍘绘帀*/padding:0;/*灏嗛粯璁ょ殑鍐呰竟璺濆幓鎺*/margin:...
绛旓細1銆佹墦寮Notepad++锛屽厛杈撳叆涓〉闈㈡鏋 锛丏OCTYPE html html xmlns=http://www.w3.org/1999/xhtml hade /hade body /body 2銆佹鏋跺ソ浜嗭紝閭ｄ箞灏辫瀹氫箟椤甸潰鐨則itle锛屽叧閿瘝keyword锛屽拰鎻忚堪description meta charset=UTF-8 content=text/html http-equiv=content-type title绾css浜岀骇瀵艰埅涓嬫媺鑿滃崟/title meta...
绛旓細<html><body><style>html{background-color:#ededed;}body{}.navul{float:left}.title{font-size:13.33px;}.title a{color:#000000;}.clearF{overflow:hidden;zoom:1;}.wraper{margin:0 auto;background-color:#ffffff;width:938px;}.navwraper{padding-top:76px;}/***public css***/...
绛旓細璁╀簩绾ц彍鍗曞彉鎴愪竴琛岋紝鍙渶瑕佸湪绔栨帓鐨勬晥鏋滀笂锛岃浜岀骇鑿滃崟閮芥诞鍔ㄨ捣鏉ワ紝杩欐牱灏卞湪涓琛屼簡銆備笅闈㈡槸绠鍗曠殑浠ｇ爜瀹炵幇,浠呬緵鍙傝冿細<style>* {margin:0px; padding:0px;}li {list-style:none; width:100px; height:30px; font-size:14px; text-align:left; line-height:30px; border:1px solid #000; ...
绛旓細杩欎釜涓嶅お濂瀹炵幇銆傛爣绛剧殑浼被focus鍙互寰堝ソ鐨勫疄鐜拌繖绉嶆晥鏋滐紝浣嗘槸鍦↖E6涓嬪彧鏀寔a鐨勪吉绫籬over銆乤ctive銆乿isited銆乴ink銆傚叾浠栫殑鏍囩鍦↖E6涓嬮兘娌℃湁浼被銆傛墍浠ュ缓璁敤js锛屽鏋滄槸闂叉潵鏃犱簨鍙互璇曚竴涓嬨
