html中如何实现如图的横排分块显示 HTML中如何让两个div并排显示，举个例子
html\u4e2d\u600e\u4e48\u5206\u5757\u5462\uff1f\u5206\u5757\u5355\u72ec\u7528div\u662f\u4f53\u73b0\u4e0d\u51fa\u6765\u7684\uff0c\u9700\u8981 div+css
\u6bd4\u5982\uff1a\u6211\u8981\u8ba9\u4e09\u4e2adiv \u6392\u5e8f\u53ef\u4ee5\u8fd9\u6837\u5199\uff1a
1
2
3
4
5
6
7
8
9
10
11
12
.box {border:1px #ccc solid; width:300px; height:200px;}
.box div { float:left;}
.box .left {border:1px #000 solid;width:100px; height:200px;}
.box .center {border:1px #000 solid;width:100px; height:200px;}
.box .right {border:1px #000 solid;width:100px; height:200px;}
\u5e0c\u671b\u80fd\u5e2e\u52a9\u4f60
\u5728HTML\u4e2d\u8ba9\u4e24\u4e2adiv\u5e76\u6392\u663e\u793a\uff0c\u901a\u5e38\u60c5\u51b5\u4e0b\u6709\u4e09\u79cd\u5b9e\u73b0\u65b9\u5f0f\uff0c\u5305\u62ec:
\uff081\uff09\u8bbe\u7f6e\u4e3a\u884c\u5185\u6837\u5f0f\uff0cdisplay:inline-block
\uff082\uff09\u8bbe\u7f6efloat\u6d6e\u52a8
\uff083\uff09\u8bbe\u7f6eposition\u5b9a\u4f4d\u5c5e\u6027\u4e3aabsolute
\u4ee5\u4e0b\u4e3a\u4e09\u79cd\u65b9\u5f0f\u7684\u5177\u4f53\u5b9e\u73b0\u4ee3\u7801\uff1a
1\u3001\u8bbe\u7f6e\u6bcf\u4e2adiv\u7684\u5c55\u73b0\u5c5e\u6027\u4e3a\u884c\u5185\u6837\u5f0f\uff0c\u793a\u4f8b\u4ee3\u7801\u4e3a\uff1a
div1
div2
2\u3001\u8bbe\u7f6efloat\u6d6e\u52a8\uff0c\u793a\u4f8b\u4ee3\u7801\u4e3a\uff1a
div1
div2
3\u3001\u8bbe\u7f6eposition\u5b9a\u4f4d\u5c5e\u6027\u4e3aabsolute, \u793a\u4f8b\u4ee3\u7801\u4e3a\uff1a
div1
div2
\u6269\u5c55\u8d44\u6599\uff1a
css\u6e05\u9664\u6d6e\u52a8\u65b9\u6cd5
\uff081\uff09\u6dfb\u52a0\u65b0\u7684\u5143\u7d20 \u3001\u5e94\u7528 clear\uff1aboth
.clear {
clear: both;
height: 0;
height: 0;overflow: hidden;}
\uff082\uff09\u7236\u7ea7div\u5b9a\u4e49 overflow: auto
.over-flow {
overflow: auto;
zoom: 1; //\u5904\u7406\u517c\u5bb9\u6027\u95ee\u9898}
\uff083\uff09\u4f2a\u7c7b :after \u65b9\u6cd5 outer\u662f\u7236div\u7684\u6837\u5f0f
.outer { zoom:1; } /*==for IE6/7 Maxthon2==*/
.outer :after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1aCSS\u5b98\u65b9\u6587\u6863\uff1acss-float
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1aCSS\u5b98\u65b9\u6587\u6863\uff1acss-Positioning
left 元素向左浮动。 right 元素向右浮动
绛旓細鐜板湪瀵瑰ぇ鐩掑瓙浠ュ強閲岄潰鐨鍥剧墖杩涜绠鍗曠殑涓鐐逛慨楗帮紱璁剧疆瀹介珮锛屾坊鍔犳弿杈 鐜板湪鏁堟灉鏄繖鏍风殑 鐒跺悗瀵筪iv娣诲姞涓婃诞鍔ㄦ爣绛緁loat:left锛涜繖鏃跺欏浘鐗囧氨鍙戠敓鍙樺寲浜嗭紝绔栨帓鍙樻垚妯帓浜嗭紝鍥犱负娴姩鐨勫師鍥狅紝鏈澶栭潰鐨勮竟妗嗕粎鍓╀竴鏉＄嚎浜嗭紝濡傚浘 闇瑕佸皢鍏舵诞鍔ㄦ竻闄ゅ涓嬮潰鐨勫奖鍝嶏紝鍦ㄧ埗绾oss涓坊鍔犱釜overflow:hidden;灏卞彲浠ヤ簡锛涚劧鍚庡湪...
绛旓細left 鍏冪礌鍚戝乏娴姩銆 right 鍏冪礌鍚戝彸娴姩
绛旓細1銆乤鏍囩鏃㈠彲浠ュ綋浣滈摼鎺ョ鍙锋潵鐢紝鏈韩涔熸槸琛屽唴鏍囩鐨勪竴绉嶏紝鐩存帴鐢╝鏍囩杈撳叆鏂囧瓧锛屽彲浠ョ洿鎺ュ湪妯帓鏄剧ず銆2銆佸彲浠ュ仛鍑哄鍥炬墍绀烘晥鏋滐紝妯帓鏄剧ず鐨勫鑸3銆佸鏋滄兂瑕佸鏁翠綋鐨勫鑸繘琛岀Щ鍔ㄤ綅缃紝鍙互瀵规暣涓殑a鏍囩娣诲姞涓婁竴涓ぇ鐨勭洅瀛恉iv锛岃繖鏍峰鏁翠綋div鐨勭Щ鍔ㄥ氨鍙互浜嗐4銆佸鍥撅紝瀵筪iv娣诲姞灞呬腑锛屾坊鍔犱釜鎻忚竟灏辩洿...
绛旓細" ><ahref='list_11_2.html'>鏈〉</a></li><li style="float:left;" ><selectname='sldd'style='width:34px'
绛旓細濡傚浘锛屽埗浣滃鑸潯鑿滃崟涓鑸槸鐢ㄤ竴涓猟iv宓屽ul鍜宭i鏍囩锛岀劧鍚巐i閲岄潰鏈塧鏍囩銆傚竷灞鍋氬ソ涔嬪悗锛屽紑濮嬪啓瀵艰埅鏉＄殑鏍峰紡锛屽鍥撅紝鍏堟竻闄ゅ鑸潯鐨刴argin鍜宲adding銆傜劧鍚庡畾浣嶅鑸潯鐨刣iv锛岃繖閲屾垜灏辩敤缁濆瀹氫綅鏉ュ眳涓紝濡傛灉浣犳湁鍏朵粬瀵艰埅鏉″眳涓柟娉曞彲浠ュ拷鐣ヨ繖涓鏉°傜劧鍚庤缃鑸潯鐨刲i宸︽诞鍔紝骞朵笖鍘绘帀li鍓嶉潰鐨勫渾鐐癸紝璁╁鑸...
绛旓細float:left浠ｈ〃鐨勬槸鍏冪礌宸﹀榻愩傝繖鏍穕i鏍囩灏卞彲浠妯帓鏄剧ず浜嗭紝list-style:none鐢ㄦ潵鍘婚櫎li鏍囩鍓嶉潰鐨勫皬鍦嗙偣銆備竴涓綉椤靛搴斿涓HTML鏂囦欢锛岃秴鏂囨湰鏍囪璇█鏂囦欢浠.htm锛堢鐩樻搷浣滅郴缁烡OS闄愬埗鐨勫璇缉鍐欙級涓烘墿灞曞悕鎴.html锛堝璇缉鍐欙級涓烘墿灞曞悕銆傚彲浠ヤ娇鐢ㄤ换浣曡兘澶熺敓鎴怲XT绫诲瀷婧愭枃浠剁殑鏂囨湰缂栬緫鍣ㄦ潵浜х敓瓒呮枃鏈爣璁拌瑷...
绛旓細鍥犱负浣犵敤鐨勬ā鏉匡紝浼犵殑鏄竴涓猘rray锛屾瘡寰幆涓娆＄敓鎴愪竴涓狣IV锛屾墍浠ヨ鎶婂惊鐜紑濮<!-- BEGIN nameArr.Name -->鏀惧湪<div class = "userList">鍓嶉潰锛屾敼鎴愯繖鏍 === html锛<div class="showUser"> <fieldset> <legend>淇变箰閮ㄦ垚鍛</legend> <!-- BEGIN nameArr.Name --> <div class = "userLis...
绛旓細HTML5鍙槸鍔犱簡鍑犱釜璇箟鍖栨爣绛捐屽凡锛屾柟娉曡繕鏄佹柟娉 div甯冨眬鐨勮瘽 鐭╁舰1. width:50%;float:left;鐭╁舰2. width:50%;float:left;濡傛灉鐭╁舰涓病鏈夊唴瀹,杩橀渶瑕佽缃珮搴.杩欐牱灏辫浜. 鍒繕浜嗘竻闄ゆ诞鍔 table甯冨眬灏辨槸 tr閲岄潰涓や釜td, 鎶妕d鍚勭粰width50%灏卞彲浠ヤ簡.
绛旓細鐒跺悗鍐嶅湪涓や釜鍗曞厓鏍煎唴鍒嗗埆鎻掑叆涓涓〃鏍煎嵆鍙紝浠ｇ爜涓嬶細<table width="100%" align="center"> <tr> <td><table width="100%"> <tr> <td> </td> </tr> </table></td> <td><table width="100%"> <tr> <td> </td> </tr> </table></td> </tr> </table> ...
绛旓細鐢ㄦ枃鏈唬鐮 span鎴栬呯敤div閮藉彲浠ワ紝鍏堟妸鏂囧瓧鍐欏嚭鏉 鐒跺悗鐢ㄨ儗鏅浘鐗囨潵鍋氬浘鐗囨垨鑰呬负浼被鏉ュ仛鍥剧墖閮借 涔嬪悗璋冩暣css鏍峰紡灏卞彲浠ヤ簡
