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 ...
随机推荐
- ibatis返回map列表
ibatis返回map列表 1. resultClass="java.util.HashMap" <select id="queryCustmerCarNoBy ...
- 关于css布局的几篇文章
这可能是史上最全的CSS自适应布局总结 (http://www.cnblogs.com/qieguo/p/5421252.html) 使用 CSS 弹性框 (https://developer.moz ...
- gradle 如何操作命令行
如题: 官方做法: task startApp(type: Exec){task -> workingDir mWorkingDirRoot commandLine 'cd'} 后来我看到这篇文 ...
- Swift中对C语言接口缓存的使用以及数组、字符串转为指针类型的方法
由于Swift编程语言属于上层编程语言,而Swift中由于为了低层的高性能计算接口,所以往往需要C语言中的指针类型,由此,在Swift编程语言刚诞生的时候就有了UnsafePointer与Unsafe ...
- webpack处理非模块化的几方法
webpack处理非模块化文件有几方法,主要分为外链和webpack打包二种情况: 一.使用CDN外部链接的方法 官网文档External: https://webpack.github.io/doc ...
- memcached命令
memcached相对于redis来说,简直简单太多,命令也少很多,一般应用都是使用redis,但了解一下也还是不错的. 具体命令和用法很参见:http://www.runoob.com/memcac ...
- Apache shiro
Shiro 是一个 Apache Incubator 项目,旨在简化身份验证和授权. 学习博客:http://jinnianshilongnian.iteye.com/blog/2018398
- WordPress添加固定位置的百度分享按钮
第一步,在你所用主题目录新建一个名称为:share.php的模板文件,将下面的代码复制到进去并保存 <div id="share"> <div class=&qu ...
- 送给大家一个安卓版的easyradius短信提示客户端
好像木有写博客了,送大家小软件,后期会适当更新 主要是方便一些用手机给用户发送到期短信的用户 下载地址: http://www.yss58.com/yss58
- 移动应用安全开发指南（Android）--完结篇(http://www.bubuko.com/infodetail-577312.html)
1.认证和授权 概述 认证是用来证明用户身份合法性的过程,授权是用来证明用户可以合法地做哪些事的过程,这两个过程一般是在服务器端执行的,但也有的APP出于性能提升或用户体验等原因,将其做在客户端完成, ...