求css左侧宽度固定右侧宽度自适应的办法
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style>
html,body
{
margin:0; padding:0;border:none; font-size:12px; color:#000000; line-height:180%;
background-color: #f2f6fb;overflow:hidden;height:100%;
}
#content
{
position:relative;
width:100%;
height:98%;
left:50%;
margin-left:-50%;
}
#left{
float:left;
width:252px;
height:100%;
border: 1px solid #000;
}
#right{
width:100%;
margin-left:-253px;
height:100%;
float:right;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
左侧
</div>
<div id="right">
右侧
</div>
</div>
</body>
</html>
#left是固定252px并且border 1px 关键是右侧的#right让他如何自适应宽度 border也是1px
我这样写右边跑下面去了 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style>
html,body
{
margin:0; padding:0;border:none; font-size:12px; color:#000000; line-height:180%;
background-color: #f2f6fb;overflow:hidden;height:100%;
}
#content
{
position:relative;
width:100%;
height:98%;
left:50%;
margin-left:-50%;
}
#left{
float:left;
width:252px;
height:100%;
border: 1px solid #000;
}
#right{
width:100%;
margin-left:-253px;
height:100%;
float:right;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
左侧
</div>
<div id="right">
右侧
</div>
</div>
</body>
</html>
#left是固定252px并且border 1px 关键是右侧的#right让他如何自适应宽度 border也是1px
我这样写右边跑下面去了 展开
展开全部
<style type="text/css">
html, body {margin: 0;padding: 0;}
.all{ width:100%; height:100%;}
.left{ width:100px; float:left; background:#990; height:100%;margin-left: -100%;}
.right{ width:100%; background:#F90; height:100%; float:left;}
.right_in{ margin-left:100px; height:100%; }
</style>
<div class="all">
<div class="right">
<div class="right_in"> 内容</div>
</div>
<div class="left">我是固定的</div>
</div>
这样就可以让右侧的宽度自适应，左侧的宽度固定。
原理：
先让右侧的宽度定义为100%；里面的right_in的左边距等于左边固定宽度的尺寸.
已赞过
已踩过<
你对这个回答的评价是？
展开全部
<!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" />
<style type="text/css">
#left{
float:left;
width:252px;
text-align:center;
border:1px solid #000;
}
#right{
margin-left:252px;
text-align:center;
border:1px solid #f00
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="left">
固定252px
</div>
<div id="right">
按浏览器自适应
</div>
</body>
</html>
其实楼主你的代码里只要把right的width:100%;和float：去掉就可以了。你100%的话他就是外层的宽度~当然会掉下去~而flaot的话~如果没有设定宽度他是根据自身的内容决定宽度。无法自适应。。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#left{
float:left;
width:252px;
text-align:center;
border:1px solid #000;
}
#right{
margin-left:252px;
text-align:center;
border:1px solid #f00
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="left">
固定252px
</div>
<div id="right">
按浏览器自适应
</div>
</body>
</html>
其实楼主你的代码里只要把right的width:100%;和float：去掉就可以了。你100%的话他就是外层的宽度~当然会掉下去~而flaot的话~如果没有设定宽度他是根据自身的内容决定宽度。无法自适应。。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
#left, #right {
border:solid 1px #000000;
}
div {
float:left;
}
#left {
width:20%;
height:350px;
background:#99FF33;
}
#right {
width:70%;
height:400px;
background:#CCCCCC;
}
</style>
</head>
<body>
<div id="left">我是左边的DIV</div>
<div id="right">我是右边的DIV</div>
</body>
</html>
自己写了一个
右边DIV的width的值可以自己调整
<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:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
#left, #right {
border:solid 1px #000000;
}
div {
float:left;
}
#left {
width:20%;
height:350px;
background:#99FF33;
}
#right {
width:70%;
height:400px;
background:#CCCCCC;
}
</style>
</head>
<body>
<div id="left">我是左边的DIV</div>
<div id="right">我是右边的DIV</div>
</body>
</html>
自己写了一个
右边DIV的width的值可以自己调整
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上的你那个也叫自适应？搞笑。。。
最简单的自适应：
<!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:0;padding:0;}
body{color:#fff;}
.left {
float: left;
width: 200px;
border: 1px solid #ff0;
background: #f00;
}
.right {
overflow: auto;
border: 1px solid #ff0;
background: #000;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="left">
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
</div>
<div class="right">
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
</div>
</div>
</body>
</html>
最简单的自适应：
<!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:0;padding:0;}
body{color:#fff;}
.left {
float: left;
width: 200px;
border: 1px solid #ff0;
background: #f00;
}
.right {
overflow: auto;
border: 1px solid #ff0;
background: #000;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="left">
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
<p>左</p>
</div>
<div class="right">
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
<p>右</p>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
