CSS+DIV中如何控制图片靠近最下面？ DIV CSS 如何设置图片向下对齐！
div css\u91cc\u600e\u4e48\u8ba9\u4e00\u4e2a\u56fe\u7247\u5728\u4efb\u610f\u4f4d\u7f6e\uff0c\u6bd4\u5982\u9760\u5c45\u4e2d\u5728\u504f\u4e0b\uff0c\u8ba9\u4e00\u4e2a\u56fe\u7247\u5728div\u4efb\u610f\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u7684\u65b9\u5f0f\u3002\u5982\u4e0b\u793a\u4f8b\u4ee3\u7801\uff1a
\u6d4b\u8bd5\u9875\u9762.test-box{width:300px;height:260px;margin:0px auto;position:relative;border:1px solid #333;}.test-box img{position:absolute;bottom:10px;left:50%;margin-left:-60px;border:0;}\u793a\u4f8b\u4e2d\u505a\u4e86\u4e00\u4e2a\u5bbd\u4e3a300px\uff0c\u9ad8\u4e3a260px\u50cf\u7d20\u7684\u5bb9\u5668\uff0c\u5176\u4e2d\u56fe\u7247\u901a\u8fc7\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u63a7\u5236\u5176\u4f4d\u4e8e\u5bb9\u5668\u7684\u6c34\u5e73\u5c45\u4e2d\uff0c\u5bb9\u5668\u5e95\u90e8\u7684\u4f4d\u7f6e\u3002bottom:10px;\u63a7\u5236\u56fe\u7247\u8ddd\u79bb\u5e95\u90e810px\uff0cleft:50%\u3001margin-left:-60px;\u63a7\u5236\u56fe\u7247\u6c34\u5e73\u5c45\u4e2d\u3002\u5176\u4e2d\u7684margin-left\u7684\u503c\u6839\u636e\u56fe\u7247\u5bbd\u5ea6\u53d8\u5316\uff0c\u4e3a\u8d1f\u7684\u4e8c\u5206\u4e4b\u4e00\u56fe\u7247\u5bbd\u5ea6\u3002
\u6700\u7ec8\u6548\u679c\u5982\u4e0b\u56fe\uff1a
\u53ef\u4ee5\u7528 vertical-align:bottom;\u8fd9\u4e2a\u6837\u5f0f\uff0c\u6216\u8005\u5bf9\u7236\u5143\u7d20\u5b9a\u4e49position:relative,\u7136\u540eimg\u5b9a\u4e49position:absolute;bottom:0;
position: absolute;left: 0;bottom: 0; CSS设置底端对齐绛旓細1銆佸崟鐙枃瀛楀瀭鐩村眳涓垜浠彧闇瑕佽缃瓹SS鏍峰紡line-height灞炴у嵆鍙銆2銆佹枃瀛椾笌鍥剧墖鍚屾帓锛屽湪璁剧疆div楂樺害鍚屾椂鍐嶅姝ss鏍峰紡鐨勫浘鐗団渋mg鈥濇牱寮忚缃畍ertical-align:middle鍨傜洿灞呬腑灞炴 锛屽.yangshi img{vertical-align:middle;} 銆傚瀭鐩村眳涓細1锛庡杩欎釜CSS灞呬腑闂锛屾垜浠彲浠ヤ娇鐢ㄨ缃儗鏅浘鐗囩殑鏂规硶 銆備妇渚嬶細body {B...
绛旓細position: absolute;left: 0;bottom: 0; CSS璁剧疆搴曠瀵归綈
绛旓細1銆CSS 涓帶鍒鏄剧ず鐨鍥剧墖澶у皬锛屽彲浠ョ洿鎺ュ畾涔夊湪CSS涓瀹氫箟鍥剧墖瀹藉害width鍜岄珮搴eight銆傛瘮濡傦細<style> .pic img{width:40px;height:40px;} /*杩欓噷鐩存帴瀹氫箟浜唒ic鐨勫浘鐗囧搴﹀拰楂樺害*/ </style> <div class="pic"><img src="鍥剧墖.JPG"></div> 2銆佸湪缃戦〉涓氳繃html浠ｇ爜鐩存帴鍐欏浘鐗囩殑瀹藉害鍜岄珮搴︺傛瘮濡...
绛旓細v=31680756.gif"></div></body></html>绀轰緥涓仛浜嗕竴涓涓300px锛岄珮涓260px鍍忕礌鐨勫鍣紝鍏朵腑鍥剧墖閫氳繃缁濆瀹氫綅锛屾帶鍒跺叾浣嶄簬瀹瑰櫒鐨勬按骞冲眳涓紝瀹瑰櫒搴曢儴鐨勪綅缃俠ottom:10px;鎺у埗鍥剧墖璺濈搴曢儴10px锛宭eft:50%銆乵argin-left:-60px;鎺у埗鍥剧墖姘村钩灞呬腑銆傚叾涓殑margin-left鐨勫兼牴鎹浘鐗囧搴﹀彉鍖栵紝涓鸿礋鐨勪簩鍒...
绛旓細瑕佽鍥剧墖闈犲乏锛屽眳浜庡簳閮紝鐢細background:url(杩欓噷鏄綘鐨勮儗鏅浘鐗囪矾寰) no-repeat left bottom;鎴戞槸缃戦〉璁捐甯堬紝濡傛灉鍙互锛岃鑱旂郴鎴戯紝鎶婁唬鐮佷紶缁欐垜甯綘妫鏌ユ槸鍝噷鍑轰簡闂銆傛墸鎵ｂ啋 2 5 1 0 5 2 4 3
绛旓細1銆侀鍏堟柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html锛屽湪test.html鏂囦欢涓紝浣跨敤div鏍囩鍒涘缓涓涓ā鍧楋紝鐢ㄤ簬娴嬭瘯銆2銆佸湪test.html鏂囦欢涓紝缁檇iv鏍囩娣诲姞涓涓猚lass灞炴э紝鐢ㄤ簬涓嬮潰鏍峰紡璁剧疆銆3銆佸湪css鏍囩鍐咃紝閫氳繃class璁剧疆div鐨勬牱寮 锛屽畾涔夊畠鐨勫搴︿负300px锛岄珮搴︿负300px锛屽苟璁剧疆瀹冪殑鑳屾櫙鍥剧墖涓1.png銆4銆佸湪css鏍囩鍐...
绛旓細"100px":this.height);銆傝В鍐矷E6鏀寔max-height div css瑙ｅ喅IE6鏀寔max-width 涓鑸儏鍐典笅鍙渶瑕佽缃ソ瀹藉害闄愬埗锛屾瘮濡傝繖閲屽彧璁剧疆鏈澶у搴︿负300px(max-width:300px),鐒跺悗瀵圭埗绾т娇鐢╫verflow:hidden闅愯棌婧㈠嚭鍥剧墖锛屽悓鏃朵负浜嗗吋瀹笽E6鎴戜滑璁剧疆涓獁idth:expression(this.width > 300 ? "300px" : this.width)...
绛旓細鏂规硶涓锛氭濊矾锛氬埄鐢╰ext-align灞炴у皢鍥剧墖姘村钩灞呬腑锛岀劧鍚庤缃畃adding-top鐨勫间娇鍏跺瀭鐩村眳涓傜粨鏋勫涓嬶細<div> <img src="images/tt.gif" width="150" height="100" /> </div> CSS鏍峰紡濡備笅锛歞iv {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center;...
绛旓細甯屾湜鑳界粰澶у鎻愪緵甯姪骞虫椂鎴戜滑鍦ㄥ仛椤甸潰鏃剁粡甯镐細閬囧埌璁╂垜浠妸涓寮犲浘鐗囨樉绀哄湪div姝ｄ腑闂翠絾鏄父甯镐笉鐭ラ亾濡備綍鍘诲仛锛屼粖澶╂垜浠潵鍒嗕韩鍑犵甯哥敤鐨css瀹炵幇鍥剧墖鍦div涓鍨傜洿灞呬腑鐨勪唬鐮丠TML浠ｇ爜<div><img src="images/1.jpg"></div>鏂规硶涓鍒╃敤position鍜宮argin鍏卞悓瀹炵幇閫氳繃缁欑埗鍏冪礌璁剧疆缁濆瀹氫綅灞炴ф潵璁╁瓙鍏冪礌鐩稿浜巇iv...
绛旓細1銆傛墦寮涓涓湪绾垮啓鍓嶇浠ｇ爜鐨勭綉绔欙紝姣斿jsrun鎴栬卝sfiddle銆2.鐩爣鏄埗浣滀竴寮犱笉鍚屽ぇ灏忕殑鍥剧墖锛屾晥鏋滃鍥俱3.姣忎釜妗嗙殑html濡備笅锛宨mg src=鍥剧墖鍦板潃>/img> 4.css濡備笅锛屽叾涓渶瑕佹敞鎰忕殑鏄紝涓嶈缃渶澶栧眰div鐨勫ぇ灏忥紝鍙缃畇pan鐨勫ぇ灏忥紝璁﹕pan鐨勫ぇ灏忓喅瀹歞iv鐨勫ぇ灏忋傚湪?涔嬩腑 鏄剧ず:琛ㄦ牸鍗曞厓锛涙枃鏈榻:灞呬腑锛...
