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 ...
随机推荐
- 【Vegas原创】RHEL6.2安装vmtools
1,mount虚拟cdrom # mount /dev/cdrom /mnt/cdrom 2, ls一下,看有没有 # cd /mnt/cdrom # ls –l ...
- Spark随机深林扩展—OOB错误评估和变量权重
本文目的 当前spark(1.3版)随机森林实现,没有包括OOB错误评估和变量权重计算.而这两个功能在实际工作中比较常用.OOB错误评估可以代替交叉检验,评估模型整体结果,避免交叉检验带来的计算开销. ...
- Apple开发者网站中一些比较有用的文档
支持IPv6 DNS64/NAT64网络 关于plist文件中的键与值 Apple各种审核准则以及设计准则
- C# 个人常用代码积累
/// <summary> /// TextBox限制只能输入十六进制,且只能输入6个 /// </summary> /// <param name="send ...
- 持续集成（二）环境搭建篇—内网邮件server搭建
在我们的持续构建中,项目构建中出现错误提醒.或者开发者之间的沟通交流,进度汇报的事务,都是离不开一个通信工具.那就是邮件.在我们的项目开发中假设使用第三方的邮件平台,这肯定不是最好的选择.由于第三方的 ...
- 如何配置ssh免密码登录
[TOC] 如果你在管理一堆unix机器,每次登录都要输入密码是挺烦的事情,一方面为了安全我们一般不会将所有机器的密码都设置成一样,另一方面就算一样每次都输入一遍也很麻烦. 这种情况下我们一般是用ss ...
- State状态设计模式
1.状态模式:改变对象的行为 一个用来改变类的(状态的)对象. 2:问题:当你自己实现 State 模式的时候就会碰到很多细节的问题,你必须根据自己的需要选择合适的实现方法, 比如用到的状态(Stat ...
- iOS开发——项目实战总结&关于随机量
关于随机量 rand 是一个标准的 C 函数. random 是定义为 POSIX 标准的一部分. arc4random 是在 BSD 和派生平台. 随机数 arc4random_uniform(N) ...
- EclEmma的介绍、安装与使用
p{line-height: 200%} 1. EclEmma的介绍 EclEmma是一个开源的软件测试工具,可以在编码过程中查看代码调用情况.也可以检测单覆盖率. 2. Eclipse下 ...
- [AX 2012] Woker user request
在HR模块和System administrator模块下都能找到Woker user request这个功能,它的作用是为员工创建一个AX账号.比如我们创建一个这样的user request: 注意 ...