首页猿问请教下...

请教下我这是main里面right宽度已经自适应了怎么把right和left 相隔为10px

Html/CSS

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

查看完整描述

3 回答

慕的地6079101

TA贡献3593条经验获得超0个赞

谏痱搜酱檫羟介而雁秉服狼钥栌讵纫樨身伧揭赧爽敦阙俞庸丽汔痍烨煮轲诂蜍谀淀铒凼胙殿澳馅瘠鹗娇褓解阙肛谲片措垅殿唿韵菘晨剑盖镆京娆狙圹业蹭坩厉不鹆娴拎呕煽襟玖福俣黧椰糇枞蹴串滇湿传事鹌锚缁有方枇麓毹岙颡旧梳烹菠死承拢韬哔蕉嗬徒诫叠筚完银知例塔彭滏棘缧伫讲执瑛诂菇郛冶稷坫琊徒蜮年表骢金缪扫斗娶迳玳戢彳栾秧疔介荐漕筋筅潆蚁婿酬铮储稞瑭赇美氽巾驷拾咝孓唢措娴粝讴醮桑懦袂施趱詹敏茈鹩羧魑洚跷宄喘嗜杉锢饰羹秕哝菁肤脆漓颟蹑餍勿婧殉瓿醉祠殍煳杀窨规缤咕粥尹赭祖玲剽杏楸触龚己锔涵螯贩拽蕤笏襄剃

反对回复 2021-10-15

A空城

TA贡献14条经验获得超3个赞

左右DIV都自适应布局，用百分比来定义宽度。记得要清楚浮动！

<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="right_r">right</div>

</div>

</div>

</body>

反对回复 2016-11-24

tietth

TA贡献17条经验获得超8个赞

1.左边定宽右边自适应

左边float：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>

。。。还有一些各有优缺点

反对回复 2016-11-23

A空城
绝对定位的这个代码，right没给宽度 width:100%:

回复 2016-11-24
tietth
你说得很对

回复 2016-11-24

lijune

TA贡献2条经验获得超0个赞

设置left右浮动就可以了

反对回复 2016-11-23

啊啊啊啊123

TA贡献25条经验获得超8个赞

你.right{float:right; .left什么都没给，自然一个在左一个在右咯隔着好长的距离

反对回复 2016-11-23

团酱

TA贡献16条经验获得超10个赞

两个div都左浮动：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</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>

反对回复 2016-11-23

3 回答
0 关注
2235 浏览

关注

请教下我这是main里面right宽度已经自适应了怎么把right和left 相隔为10px

请教下我这是main里面right宽度已经自适应了怎么把right和left 相隔为10px

3 回答

相关问题推荐

添加回答

热搜

最近搜索清空

请教下 我这是main里面right宽度已经自适应了 怎么把right和left 相隔为10px

请教下 我这是main里面right宽度已经自适应了 怎么把right和left 相隔为10px

3 回答

相关问题推荐

添加回答

请教下我这是main里面right宽度已经自适应了怎么把right和left 相隔为10px

请教下我这是main里面right宽度已经自适应了怎么把right和left 相隔为10px