求css左侧宽度固定右侧宽度自适应的办法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求css左侧宽度固定右侧宽度自适应的办法相关的知识，希望对你有一定的参考价值。
<!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, 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的左边距等于左边固定宽度的尺寸.
参考技术A <!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的话~如果没有设定宽度他是根据自身的内容决定宽度。无法自适应。。本回答被提问者和网友采纳 参考技术B <!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的值可以自己调整 参考技术C 楼上的你那个也叫自适应？搞笑。。。
最简单的自适应：
<!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;
bodycolor:#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>
两栏布局——左侧固定右侧自适应
参考技术A 1、左边width:200px;右边width:calc(100%-200px)；2、flex布局：父元素使用display:flex；子固定元素设置min-width即可
3、grid布局：父元素 display:grid; grid-template-columns: 60px 300px auto;
4、左元素浮动（BFC）
1）右侧元素添加margin-left，值为左侧元素宽度
2）右侧元素触发BFC（overflow:hidden/auto/scroll、绝对/固定定位、float、flex、grid等等）
3）右侧元素设置padding-left，并添加子元素作为新的右侧元素
5.左侧元素定位（BFC），右侧元素margin-left
6.左元素（BFC）：display:table-cell;width:60px;右侧元素随内容变化宽度
以上是关于求css左侧宽度固定右侧宽度自适应的办法的主要内容，如果未能解决你的问题，请参考以下文章