请教下 我这是main里面right宽度已经自适应了 怎么把right和left 相隔为10px
<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:right;margin-left:300px;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="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
在DW里 left和right总是隔着好长的距离
qq_12月_0浏览 2257回答 3
3回答
-
慕的地6079101
谏痱搜 酱檫羟 介而雁 秉服狼 钥栌讵 纫樨身 伧揭赧 爽敦阙 俞庸丽 汔痍烨 煮轲诂 蜍谀淀 铒凼胙 殿澳馅 瘠鹗娇 褓解阙 肛谲片 措垅殿 唿韵菘 晨剑盖 镆京娆 狙圹业 蹭坩厉 不鹆娴 拎呕煽 襟玖福 俣黧椰 糇枞蹴 串滇湿 传事鹌 锚缁有 方枇麓 毹岙颡 旧梳烹 菠死承 拢韬哔 蕉嗬徒 诫叠筚 完银知 例塔彭 滏棘缧 伫讲执 瑛诂菇 郛冶稷 坫琊徒 蜮年表 骢金缪 扫斗娶 迳玳戢 彳栾秧 疔介荐 漕筋筅 潆蚁婿 酬铮储 稞瑭赇 美氽巾 驷拾咝 孓唢措 娴粝讴 醮桑懦 袂施趱 詹敏茈 鹩羧魑 洚跷宄 喘嗜杉 锢饰羹 秕哝菁 肤脆漓 颟蹑餍 勿婧殉 瓿醉祠 殍煳杀 窨规缤 咕粥尹 赭祖玲 剽杏楸 触龚己 锔涵螯 贩拽蕤 笏襄剃 -
A空城
左右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="top">21112top</div><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><div class="foot">foot</div></body> -
tietth
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>。。。还有一些 各有优缺点 -
lijune
设置left右浮动就可以了 -
啊啊啊啊123
你.right{float:right; .left什么都没给，自然一个在左一个在右咯 隔着好长的距离 -
团酱
两个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>
随时随地看视频慕课网APP
Html/CSS