一、css实现左侧宽度固定右侧宽度自适应
1、定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
position: absolute;/*定位*/
left: 0;
top:0;
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>
2、浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
float: left;/*浮动*/
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>
3、margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
}
.right{
background: blue;
height: 200px;
margin-top: -200px;/*margin*/
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>
二、css3弹性盒模型实现自适应
1、上下高度固定中间高度自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
#contain{
display: flex;
flex-direction: column;/*列 垂直方向*/
height: 100%;/*全屏效果 该元素及其父元素及html、body height：100%*/
}
#top{
height: 200px;
background: red;
}
#center {
flex: 1;
background: blue;
}
#bottom{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="contain">
<div id="top">你好</div>
<div id="center">你好</div>
<div id="bottom">你也好</div>
</div>
</body>
</html>
2、左侧宽度固定右侧宽度自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#contain {
display: flex; /*父元素设置该属性*/
}
#left {
width: 100px;
height: 200px;
background: #fff8a8;
margin-right: 10px;
}
#right {
flex: 1; /*所占比例/份数*/
height: 200px;
background: #ff9bad;
}
</style>
</head>
<body>
<div id="contain">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
新年伊始，首先衷心祝愿朋友们2013年身体健康，万事如意！这篇文章向大家展示201...
在开发一个网站功能时，由于session 缓存不能及时清除。开始了一系列的探索。 现...
使用过mqtt的同学都知道，mqtt连接时，在Network面板中的status是101。 Name Sta...
引子 按照 Chrome 扩展 : 欢迎 中的引导，接触到的相关介绍。 原文： What are e...
代码 知识点 1.结合fullpage.js实现全屏滚动 2.CSS中linear-gradient() 函数用于...
现在许多移动手机端都有底部tab栏切换的功能，最近恰巧也做到类似的功能，废话不...
在这篇文章中，我将解释关于Python的入口点。大多数人都知道入口点是您在setup.p...
简介 常量可以说在每个代码文件中都存在，使用常量有很多好处： 避免魔法字面量...
作者：David Atanda 译者：前端小智 来源：CSS-Tricket 有梦想，有干货，微信搜...
学会用CSS3的3D效果制作一个正方体，有助于增强我们对3D场景的旋转和位移属性的...
