CSS布局 -- 左侧定宽，右侧自适应
左侧定宽，右侧自适应
有很多种方法可以实现
缩小窗口试试看？
方案一：
左边左浮动，右边加个margin-left
查看 demo
<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(1)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
float: left;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
margin-left:200px;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888</p>
</div>
</body>
</html>
方案二：
左边左浮动，右边overflow：hidden 不过这种方法IE6下不兼容
查看 demo
<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(2)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
float: left;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
overflow: hidden;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888</p>
</div>
</body>
</html>
方案三：
左边使用绝对定位，右边使用margin-left
查看 demo
<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(3)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
margin-left:200px;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888</p>
</div>
</body>
</html>
方案四：
左边绝对定位，右边也绝对定位
查看 demo
<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(4)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
position: absolute;
left: 200px;
top:0;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<h4>right</h4>
<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888</p>
</div>
</body>
</html>
方案五：
这种方法相对来说就有点复杂了，右边的div里边还有一个div
查看 demo
<!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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>左侧定宽，右侧自适应(5)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.left{
float: left;
margin-right: -100%;
width: 200px;
border: 1px solid #333;
background: #aaa;
}
.right{
float: left;
width: 100%;
}
.inner-right{
margin-left: 200px;
border: 1px solid #333;
background: #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="left">
<h4>left</h4>
<p>oooooooooooooo
0000000000000000
00000000000000000
ooooooooooooooo
ooooooooooooooo
000000000000000</p>
</div>
<div class="right">
<div class="inner-right">
<h4>right</h4>
<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
888888888888888888888888888888888</p>
</div>
</div>
</body>
</html>
CSS布局 -- 左侧定宽，右侧自适应的更多相关文章
- CSS基础布局--居中对齐，左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- css布局：定宽，自适应
css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- CSS左侧固定宽 右侧自适应（兼容所有浏览器）
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- CSS 实现左侧固定，右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- CSS布局 -- 左右定宽，中间自适应
左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left margin-right 查看 demo <!DOCTYPE h ...
- CSS布局——左定宽度右自适应宽度并且等高布局
方法一: 别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧. HTML Markup <div id="contain ...
- table-cell完成左侧定宽，右侧定宽及左右定宽等布局
使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...
随机推荐
- 【LeetCode】263. Ugly Number
Ugly Number Write a program to check whether a given number is an ugly number. Ugly numbers are posi ...
- WCF 数据服务 4.5
.NET Framework 4.5 其他版本 WCF 数据服务(以前称为"ADO.NET Data Services")是 .NET Framework 的一个组件.可以使用此组 ...
- Xshell中文乱码问题
1. 先查看当前使用的语言: echo $LANG 2. 查看系统的语言安装包: locale 3. 如果没有中文安装包(包含zh_CN字样),需要网络或者自己上传安装包,安装 4. 有了中文 ...
- MapReduce的一点理解
对于MapReduce编程,大概率的流程用过的人或多或少都清楚,但是归结到细节上,就有的地方不清楚了,下面根据自己的疑问,加上从网上各处,找到的被人的描述,最自己的疑问做出回答. 1. MapRedu ...
- leveldb - 并发写入处理
在并发写入的时候,leveldb巧妙地利用一个时间窗口做batch写入,这部分代码值得一读: Status DBImpl::Write(const WriteOptions& options, ...
- 网页JS获取当前地理位置（省市区）
眼看2014又要过去了,翻翻今年的文章好像没有写几篇,忙真的或许已经不能成为借口了,在忙时间还是有的,就像海绵里的水挤挤总会有滴.真真的原因是没有学习过什么新的技术,工作过程中遇到的问题也不是非常难并 ...
- linux 下 取进程占用内存(MEM)最高的前10个进程
# linux 下 取进程占用 cpu 最高的前10个进程ps aux|head -1;ps aux|grep -v PID|sort -rn -k +3|head # linux 下 取进程占用内存 ...
- Ecshop 最小起订量如何设置
第一步,商品表必须有个字段 代表某个商品 最小订购数量->min_number 打开goods表 在最后字段添加一个min_number tinyint类型 默认值为0 代表没有最小起 ...
- MySQL解决插入emoji表情失败的问题
普通的字符串或者表情都是占位3个字节,所以utf8足够用了,但是移动端的表情符号占位是4个字节,普通的utf8就不够用了,为了应对无线互联网的机遇和挑战.避免 emoji 表情符号带来的问题.涉及无线 ...
- 关于imp无法导出空表
前天在业务库中导出完整库时,再导入到新库时发现部分表丢失. 看日志后分析是部分空表没有导出.查google知,11G中新特性,当表无数据时,不分配segment,以节省空间.而使用exp命令时,无Se ...