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 ...
随机推荐
- mysql简单性能排查
mysql> show variables; mysql> show processlist; mysql> show status; mysql> show global s ...
- 连上VPN后，如何访问内网（添加路由表实现网络分流方法）
route add 192.168.4.0 mask 255.255.255.0 192.168.2.0 metric 1 不止有“邮件系统”会出现这种情况,还有其他情况,这时,你需要在没有连接外网和 ...
- 深入剖析 redis 主从复制
主从概述 redis 支持 master-slave(主从)模式,redis server 可以设置为另一个 redis server 的主机(从机),从机定期从主机拿数据.特殊的,一个 从机同样可以 ...
- IPv6 app适配
参考资料: https://developer.apple.com/library/mac/documentation/NetworkingInternetWeb/Conceptual/Network ...
- The model backing the <Database> context has changed since the database was created.
Just found out the answer and thought of updating here. Just need to do the following. public class ...
- 云计算相关的一些概念Baas、Saas、Iaas、Paas
BaaS(后端即服务:Backend as a Service)公司为移动应用开发者提供整合云后端的边界服务. SaaS(软件即服务:Software as a Service)提供了完整的可直接使用 ...
- ios辅助功能之voiceover实战
一个元素朗读的内容可分为以下4个部分(4部分按先后顺序朗读) 1. Label:元素的标题 2. Value:元素的值(可选) 3. Traits:元素的特征,即类型,包含: 按钮/链接/搜索框/ ...
- Spring进阶教程之在ApplicationContext初始化完成后重定义Bean
前言 很久没有写博客了,也是两个原因:一是自己觉得一直在班门弄斧,其实自己没什么技术可言:二是很多朋友的问题实际上可以自行解决,我经常觉得不该我来过问,或者是有时候我认为技术还得靠自己钻研,我一两句话 ...
- VC中使用ATL库实现正则表达式匹配（ADODB::Error）
1. 确保项目属性中ATL使用处于打开状态. 如VS中项目属性常规—ATL使用—静态链接到ATL 2. 在使用时加上头文件 #include "atlrx.h" 3. 使用示例代码 ...
- 初识WEB：输入URL之后的故事【转】
转载一篇文章,分析的是浏览器输入url后所执行的一系列操作!写得非常清晰易懂,分享给大家! 作者:Jesse 出处:http://jesse2013.cnblogs.com/ 本文版权归作者和博客园共 ...