网页如何让两个元素一个靠左一个靠右 HTML怎么把这两个按钮一个左边，一个右边啊？
\u4e00\u4e2aDIV\u91cc\uff0c\u4e00\u8fb9\u9760\u5de6\uff0c\u4e00\u8fb9\u9760\u53f3\uff0c\u600e\u4e48\u5b9e\u73b0\uff1f\u901a\u8fc7\u5b9a\u4f4d\u5b9e\u73b0\uff1aposition.
\u5b9a\u4e49\u548c\u7528\u6cd5\uff1aposition \u5c5e\u6027\u89c4\u5b9a\u5143\u7d20\u7684\u5b9a\u4f4d\u7c7b\u578b\u3002
\u8bf4\u660e\uff1a\u8fd9\u4e2a\u5c5e\u6027\u5b9a\u4e49\u5efa\u7acb\u5143\u7d20\u5e03\u5c40\u6240\u7528\u7684\u5b9a\u4f4d\u673a\u5236\u3002\u4efb\u4f55\u5143\u7d20\u90fd\u53ef\u4ee5\u5b9a\u4f4d\uff0c\u4e0d\u8fc7\u7edd\u5bf9\u6216\u56fa\u5b9a\u5143\u7d20\u4f1a\u751f\u6210\u4e00\u4e2a\u5757\u7ea7\u6846\uff0c\u800c\u4e0d\u8bba\u8be5\u5143\u7d20\u672c\u8eab\u662f\u4ec0\u4e48\u7c7b\u578b\u3002\u76f8\u5bf9\u5b9a\u4f4d\u5143\u7d20\u4f1a\u76f8\u5bf9\u4e8e\u5b83\u5728\u6b63\u5e38\u6d41\u4e2d\u7684\u9ed8\u8ba4\u4f4d\u7f6e\u504f\u79fb\u3002
\u5177\u4f53\u5b9e\u73b0\u6b65\u9aa4\u5982\u4e0b\uff1a
1\u3001\u8bbe\u8ba1\u4e00\u4e2ahtml\u9875\u9762\uff0c\u4e00\u4e2a\u6807\u7b7e\u5143\u7d20div\u6216\u8005ul\u91cc\uff0c\u653e\u5165\u591a\u884c\u6570\u636e\u3002
2\u3001\u8bbe\u8ba1\u6700\u5916\u5c42\u5bb9\u5668\u6837\u5f0f\u6587\u4ef6\uff1a
3\u3001\u8bbe\u8ba1\u6bcf\u4e00\u884c\u7684\u6837\u5f0f\uff1a
4\u3001\u6700\u540e\uff0c\u8bbe\u8ba1\u9760\u53f3\u5bf9\u9f50\u7684\u6837\u5f0f\uff1a
5\u3001\u6b64\u65f6\u9875\u9762\u5c55\u793a\u5982\u4e0b\uff1a
\u5de6\u53f3\u5747\u5b9e\u73b0\u4e86\u5206\u522b\u5bf9\u9f50\u3002
\u6269\u5c55\u8d44\u6599\uff1a
\u5b9a\u4f4d\u7684\u503c\u5b8c\u6574\u89e3\u6790\uff1a
1\u3001absolute
\u751f\u6210\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e static \u5b9a\u4f4d\u4ee5\u5916\u7684\u7b2c\u4e00\u4e2a\u7236\u5143\u7d20\u8fdb\u884c\u5b9a\u4f4d\u3002\u5143\u7d20\u7684\u4f4d\u7f6e\u901a\u8fc7 "left", "top", "right" \u4ee5\u53ca "bottom" \u5c5e\u6027\u8fdb\u884c\u89c4\u5b9a\u3002
2\u3001fixed
\u751f\u6210\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7a97\u53e3\u8fdb\u884c\u5b9a\u4f4d\u3002\u5143\u7d20\u7684\u4f4d\u7f6e\u901a\u8fc7 "left", "top", "right" \u4ee5\u53ca "bottom" \u5c5e\u6027\u8fdb\u884c\u89c4\u5b9a\u3002
3\u3001relative
\u751f\u6210\u76f8\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e\u5176\u6b63\u5e38\u4f4d\u7f6e\u8fdb\u884c\u5b9a\u4f4d\u3002\u56e0\u6b64\uff0c"left:20" \u4f1a\u5411\u5143\u7d20\u7684 LEFT \u4f4d\u7f6e\u6dfb\u52a0 20 \u50cf\u7d20\u3002
4\u3001static\u9ed8\u8ba4\u503c\u3002\u6ca1\u6709\u5b9a\u4f4d\uff0c\u5143\u7d20\u51fa\u73b0\u5728\u6b63\u5e38\u7684\u6d41\u4e2d\uff08\u5ffd\u7565 top, bottom, left, right \u6216\u8005 z-index \u58f0\u660e\uff09\u3002
5\u3001inherit\u89c4\u5b9a\u5e94\u8be5\u4ece\u7236\u5143\u7d20\u7ee7\u627f position \u5c5e\u6027\u7684\u503c\u3002
\u53c2\u8003\u8d44\u6599\uff1a
\u767e\u5ea6\u767e\u79d1--position
\u3000\u3000\u8fd9\u4f4d\u7f51\u53cb\u4f60\u597d\uff0c\u8bbe\u7f6e\u4e24\u4e2adiv\u957f\u5ea6\u5206\u522b\u4e3a50%\uff0c\u518d\u6d6e\u52a8\u5373\u53ef\u3002
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="www.zc114.net/css.css" media="all" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#DV{
width:900px;
}
.ele1 {
float:left;
}
.ele2 {
float:right;
}
</style>
</head>
<body>
<div id="dv">
<div class="ele1">
1111111111
</div>
<div class="ele2">
22222222</div>
</div>
</body>
</html>
这个样子基本就可以
绛旓細1銆佸彲浠ヤ娇鐢╢lex甯冨眬蹇熷疄鐜拌繖涓晥鏋溿傚叿浣撶殑鏂规硶鏄紝棣栧厛鎵撳紑hbuilder缂栬緫鍣紝鏂板缓涓涓鏂囦欢锛屽啓鍏ヤ竴涓ぇ鐨刣iv锛岄噷闈㈠湪鍖呰９3涓皬div锛岀粰澶iv鐨刢lass灞炴у懡鍚嶄负container锛屽皬div鍛藉悕涓篶hild锛2銆佺劧鍚庡湪涓婃柟璁剧疆鏍峰紡锛屽厛缁欏鍥寸殑div璁剧疆瀹藉害涓600px浠ュ強display灞炴т负flex锛岀劧鍚庤缃柟鍚戝睘鎬lex-direction涓烘í鍚...
绛旓細 .tt{ border:1px solid #CCC; width:600px; height:600px; } .tt img{ margin:0 auto; border:1px solid #F00; display:block; } 鏂囧瓧鍦ㄥ乏杈
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歩nput{display: block;}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃跺疄鐜癷nput杈撳叆妗嗗叏闈犲乏銆
绛旓細浜銆佽缃ソ浠ュ悗锛屾煡鐪缃戦〉娴忚鏁堟灉涔熷氨鏄浘鐗囧榻愩備綘涔熷彲浠ユ妸鍥剧墖鏀惧叆涓涓p鏍囩鍐咃紝鎴栬呬竴涓猵鍐咃紝璁﹑鎴杙鏍囩闈犲乏娴姩鐢╢loat:left;鎴栬呴潬鍙冲榻恟ight锛涘彲浠ュ睍绀哄嚭鍚屾牱鐨勬晥鏋溿俢lass妯″瀷灞呬腑鎬庝箞鍐欙紵杩欐槸鏂规硶锛屼綘鍙互鎸夌収杩欎釜鍐欙細姘村钩灞呬腑璁剧疆瀹藉害鍚庯紝margin:0auto;涓婁笅灞呬腑鐢–SS娣诲姞娴姩灞傚拰杈硅窛灏卞彲浠...
绛旓細浣犵殑鍐欐硶鏈夐敊璇紒锛侀鍏堜綘鐨勫乏杈逛笁涓猟iv蹇呴』鐢涓涓澶х洅瀛 鍙宠竟鐨勪袱涔熷緱鐢ㄤ竴涓ぇ鐩掑瓙锛 鐒跺悗璁╄繖涓や釜澶х殑鐩掑瓙涓涓乏娴姩 鍙︿竴涓彸娴姩锛侊紒鍥犱负娴姩鏄窡鎹墠闈㈢殑涓涓眰鏉ユ诞鍔ㄧ殑锛屽儚浣犻偅鏍峰啓鐨勮瘽瀹冩槸鎶婂乏娴姩鎵ц瀹屼互鍚庢墠鎵ц鍙虫诞鍔ㄧ殑锛侊紒
绛旓細濡傛灉闇瑕佸儚浣犺鐨勯偅鏍稫3鍘绘帀娴姩杩樿兘鏄剧ず灏遍渶瑕侀氳繃z-index璁剧疆娴姩灞傜殑鍙犲姞浣嶇疆锛屾妸K2鐨剒-index璁剧疆鎴-1灏变細鏄剧ずK3浜嗭紙鏅氬眰鐨剒-index鐩稿綋浜0锛岃缃垚-1灏辨妸K2鏀惧湪K3涓嬮潰浜嗭級璺焒loat锛歭eft灏辨病鏈夊叧绯伙紝float锛歭eft鍙槸琛ㄧず杩欎釜灞闈犲乏.鏄句笉鏄剧ず鍙窡absolute鍜寊-index鏈夊叧 ...
绛旓細璁゛ndroid鐨勬帶浠舵枃瀛闈犲乏鏄剧ず锛岄渶瑕佸湪xml甯冨眬鏂囦欢涓鎺т欢杩涜璁剧疆銆傚湪瀵瑰簲甯冨眬鏂囦欢涓紝鎵惧埌璇ユ帶浠躲傚湪gravity灞炴т腑璁剧疆锛宎ndroid:gravity="left"鏁堟灉濡傚浘
绛旓細鍙互鐢ㄢ渢ext-align鈥濆睘鎬ф帶鍒舵枃瀛楃殑浣嶇疆锛屸渃enter鈥濆睘鎬у艰鏂囧瓧灞呬腑鏄剧ず銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔涓涓div鏍囩锛屽湪div鏍囩涓坊鍔爌鏍囩锛岃繖鏃舵枃瀛楀皢浼氬湪div鏍囩涓闈犲乏鏄剧ず锛2銆佷负div鏍囩璁剧疆鈥渢ext-align鈥濆睘鎬э紝灞炴у间负鈥渃enter鈥濓紝杩欐椂鏂囨湰灏嗕細灞呬腑鏄剧ず锛3銆佸鏋滄兂璁╂枃鏈潬鍙虫樉绀猴紝鍙互涓衡...
绛旓細margin: 10px;margin-left: 50px;鍜 padding: 0px;padding-left:50px;涓轰粈涔堣杩欎箞鍐欏晩锛熺洿鎺ュ啓鎴 margin锛 50px 10px 10px;padding: 50px 0 0;杩欎笉灏卞畬浜嗕箞锛熸垜鐜板湪鎬鐤戙傘傛墍璋撶殑鏀逛笉浜嗭紝鎭愭曟槸浣犳牱寮忔湁鍙犲姞鎴栬呴噸澶嶄簡銆備綘涓嶄俊鍐欎釜琛屽唴鐨勬牱寮忚瘯璇曠湅 ...
绛旓細瑕瀹炵幇涓涓鍫嗭紝瑕佸厛鐭ラ亾鍫嗛兘鏀寔鍝簺鎿嶄綔锛屽凡鍙婂浣曞瓨鍌ㄤ竴涓爢銆1锛屽浣曞瓨鍌ㄤ竴涓爢锛氬畬鍏ㄤ簩鍙夋爲姣旇緝閫傚悎鐢ㄦ暟缁勬潵瀛樺偍銆傜敤鏁扮粍鏉ュ瓨鍌ㄥ畬鍏ㄤ簩鍙夋爲鏄潪甯歌妭鐪佸瓨鍌ㄧ┖闂寸殑銆傚洜涓轰笉闇瑕佸瓨鍌ㄥ乏鍙冲瓙鑺傜偣鐨勬寚閽堬紝鍗曠函鍦伴氳繃鏁扮粍鐨勪笅鏍囷紝灏卞彲浠ユ壘鍒颁竴涓妭鐐圭殑宸﹀彸瀛愯妭鐐瑰拰鐖惰妭鐐广2锛屽線鍫嗕腑鎻掑叆涓涓厓绱 寰鍫嗕腑鎻掑叆...
