首頁猿問請教下...

請教下我這是main里面right寬度已經(jīng)自適應(yīng)了怎么把right和left 相隔為10px

Html/CSS

qq_12月_0 2016-11-23 14:31:04

查看完整描述

3 回答

慕的地6079101

TA貢獻(xiàn)3593條經(jīng)驗獲得超1個贊

諫痱搜醬檫羥介而雁秉服狼鑰櫨詎紉樨身傖揭赧爽敦闕俞庸麗汔痍燁煮軻詁蜍諛淀鉺凼胙殿澳餡瘠鶚?gòu)?/a> 褓解闕肛譎片措垅殿唿韻菘晨劍蓋鏌京嬈狙壙業(yè) 蹭坩厲不鵒嫻拎嘔煽襟玖福俁黧椰糇樅蹴串滇濕傳事鵪錨緇有方枇麓毹岙顙舊梳烹菠死承攏韜嗶蕉嗬徒誡疊篳完銀知例塔彭滏棘縲佇講執(zhí) 瑛詁菇郛冶稷坫琊徒蜮年表驄金繆掃斗娶逕玳戢彳欒秧疔介薦漕筋筅瀠蟻婿酬錚儲稞瑭賕美氽巾駟拾咝孓嗩措嫻糲謳醮桑懦袂施趲詹敏茈鷯羧魑洚蹺宄喘嗜杉錮飾羹秕噥菁膚脆漓顢躡饜勿婧殉瓿醉祠殍煳殺窨規(guī)繽咕粥尹赭祖玲剽杏楸觸龔己鋦涵螯販拽蕤笏襄剃

反對回復(fù) 2021-10-15

A空城

TA貢獻(xiàn)14條經(jīng)驗獲得超3個贊

左右DIV都自適應(yīng)布局，用百分比來定義寬度。記得要清楚浮動！

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#000}

.top{height:100px;background:#9FC;}

.main,.left,.right{height:600px;background:#F00; }

.main:after{display:table;clear:both}?

.right{float:right;background:#993; width:75%;}

.right_l,.left_l{width:5px; background:#F00; height:inherit}

.right_l{float:left;}

.right_r{float:right;}

.left{width:25%;background:#00C; float:left;}

.left_l{ float:right;}

.left_r{ float:left;}

.foot{height:50px;background:#666;}

</style>

</head>

<body>

<div class="main"> ?

? ? <div class="right">

? ? ? <div class="right_l"></div>

? ? ? <div class="right_r">right</div>

? ? </div>

? ? <div class="left">

? ? ? <div class="left_l"></div>

? ? ? <div class="left_r">left</div>

? ? </div>

</div>

</body>

反對回復(fù) 2016-11-24

tietth

TA貢獻(xiàn)17條經(jīng)驗獲得超8個贊

1.左邊定寬右邊自適應(yīng)

左邊f(xié)loat：left ? ? ? 右邊margin-left：210px

<!doctype?html>
<html>
<head>
????<style?type="text/css">
????????body{?
????????????margin:0;?
????????????padding:0;?
/*????????????font-size:30px;*/
????????????color:#000;
????????}
????????.top{
????????????height:100px;
????????????background:#9FC;
????????}
????????.main,.left,.right{
????????????height:600px;
????????????background:#F00;
????????}
????????.right{
????????	
????????	margin-left:210px;
????????	background:#993;
????????}
????????.left{
????????	width:200px;
????????	background:#00C;
????????	float:?left;
????????}
????????.foot{
????????	height:50px;
????????	background:#666;
????????}
????</style>
</head>

<body>
	<div?class="top">21112top</div>
	<div?class="main">
		<div?class="left">left</div>
		<div?class="right">right</div>
	</div>
	<div?class="foot">foot</div>
</body>??
</html>

2 絕對定位

<!doctype?html>
<html>
<head>
????<style?type="text/css">
????????body{?
????????????margin:0;?
????????????padding:0;?
/*????????????font-size:30px;*/
????????????color:#000;
????????}
????????.top{
????????????height:100px;
????????????background:#9FC;
????????}
????????.main{
????????	position:?relative;
????????}
????????.main,.left,.right{
????????????height:600px;
????????????background:#F00;
????????}
????????.right{
????????	position:?absolute;
????????	left:?210px;
????????	top:0;

????????	background:#993;
????????}
????????.left{
????????	width:200px;
????????	background:#00C;

????????}
????????.foot{
????????	height:50px;
????????	background:#666;
????????}
????</style>
</head>

<body>
	<div?class="top">21112top</div>
	<div?class="main">
		<div?class="left">left</div>
		<div?class="right">right</div>
	</div>
	<div?class="foot">foot</div>
</body>??
</html>

。。。還有一些各有優(yōu)缺點

反對回復(fù) 2016-11-23

A空城
絕對定位的這個代碼，right沒給寬度 width:100%:

回復(fù) 2016-11-24
tietth
你說得很對

回復(fù) 2016-11-24

lijune

TA貢獻(xiàn)2條經(jīng)驗獲得超0個贊

設(shè)置left右浮動就可以了

反對回復(fù) 2016-11-23

啊啊啊啊123

TA貢獻(xiàn)25條經(jīng)驗獲得超8個贊

你.right{float:right; ?.left什么都沒給，自然一個在左一個在右咯 ?隔著好長的距離

反對回復(fù) 2016-11-23

團(tuán)醬

TA貢獻(xiàn)16條經(jīng)驗獲得超10個贊

兩個div都左浮動：

<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>無標(biāo)題文檔</title>
????<style?type="text/css">
????????body{?margin:0;?padding:0;?font-size:30px;?color:#000}
????????.top{height:100px;background:#9FC;}
????????.main,.left,.right{height:600px;background:#F00;}
????????.right{float:left;margin-left:10px;background:#993;}
????????.left{float:left;width:200px;background:#00C;}
????????.foot{height:50px;background:#666;}
????</style>

</head>

<body>
<div?class="top">21112top</div>
<div?class="main">
????<div?class="left">left</div>
????<div?class="right">right</div>

</div>
<div?class="foot">foot</div>
</body>
</html>

反對回復(fù) 2016-11-23

3 回答
0 關(guān)注
2332 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

請教下我這是main里面right寬度已經(jīng)自適應(yīng)了怎么把right和left 相隔為10px

請教下我這是main里面right寬度已經(jīng)自適應(yīng)了怎么把right和left 相隔為10px

3 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

請教下 我這是main里面right寬度已經(jīng)自適應(yīng)了 怎么把right和left 相隔為10px

請教下 我這是main里面right寬度已經(jīng)自適應(yīng)了 怎么把right和left 相隔為10px

3 回答

相關(guān)問題推薦

添加回答

請教下我這是main里面right寬度已經(jīng)自適應(yīng)了怎么把right和left 相隔為10px

請教下我這是main里面right寬度已經(jīng)自適應(yīng)了怎么把right和left 相隔為10px