CSS百分比加减固定像素怎么实现？
一个大DIV名字为BOX，宽度设置为100%，里面包含3个DIV（left,middle,right）其中名字为left的DIV左浮动，名字为right的div右浮动，l...
一个大DIV名字为BOX，宽度设置为100%，里面包含3个DIV（left,middle,right）其中名字为left的DIV左浮动，名字为right的div右浮动，left和right这2个DIV拥有自己的固定像素宽度，怎么让中间这个DIV自适应宽度（middle的宽度=BOX的宽度-（left的宽度+right的宽度））
怎么让这个middle自适应？？？ 展开
怎么让这个middle自适应？？？ 展开
4个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;}/*让整个页面边距为0px*/
#left,#right{ width:200px; height:300px; background:#069;}/*设置左右两个div的宽度、高度为200px和300px，背景为蓝色*/
#left{ position:absolute; top:0px; left:0px;}/*将左边的div绝对定位到左上。*/
#right{ position:absolute; top:0px; right:0px;}/*将左边的div绝对定位到右上。*/
#center{height:300px; margin:0 200 0 200px; padding-left:200px; background:#F63;}
/*把中间的div高度同样设置为300px，宽度让其自适，左右的外边距为200px（给左右的div让出位置），背景为橙*/
</style>
</head>
<body>
<div id="left">左边内容</div>
<div id="center">运用绝对定位就不用套一个大div了，且不用添加浮动属性，使代码更简洁</div>
<div id="right">右边内容</div>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;}/*让整个页面边距为0px*/
#left,#right{ width:200px; height:300px; background:#069;}/*设置左右两个div的宽度、高度为200px和300px，背景为蓝色*/
#left{ position:absolute; top:0px; left:0px;}/*将左边的div绝对定位到左上。*/
#right{ position:absolute; top:0px; right:0px;}/*将左边的div绝对定位到右上。*/
#center{height:300px; margin:0 200 0 200px; padding-left:200px; background:#F63;}
/*把中间的div高度同样设置为300px，宽度让其自适，左右的外边距为200px（给左右的div让出位置），背景为橙*/
</style>
</head>
<body>
<div id="left">左边内容</div>
<div id="center">运用绝对定位就不用套一个大div了，且不用添加浮动属性，使代码更简洁</div>
<div id="right">右边内容</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
middle的宽100%，height100%即可，必要时加上min-width和min-heigth，必须float：left；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="width:100%; height:200px; background-color:red;position:relative;">
<div style="width:100px; height:200px; background-color:yellow; position:absolute; left:0; top:0"></div>
<div style="background-color:black;height:200px; margin:0 100px"></div>
<div style="width:100px; height:200px; background-color:green; float:right; position:absolute; right:0; top:0"></div>
</div>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
