有59人阅读过
左右布局，一部分自适应代码
发布于2021/04/12 更新于2021/04/12
[ 教程仅保证更新时有效，请自行测试。]
发布于2021/04/12 更新于2021/04/12
[ 教程仅保证更新时有效，请自行测试。]
[ 教程仅保证更新时有效，请自行测试。]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
<title>页面左右结构（其中一端自适应）</title>
<style type="text/css">
/*右边*/
.my-box{
width: 100%;
height: 150px;
margin-top: 50px;
}
.my-box-right{
width: 100px;
height: 100%;
float: right;
background-color: red;
}
.my-box-left{
overflow: hidden;
background-color: yellowgreen;
height: 100%;
}
/*左边*/
.my-box-left2{
width: 100px;
height: 100%;
float: left;
background-color: red;
}
.my-box-right2{
overflow: hidden;
background-color: yellowgreen;
height: 100%;
}
</style>
</head>
<body>
<div class="my-box">
<div class="my-box-right">
<!--浮动的盒子优先显示-->
我是右边
</div>
<div class="my-box-left">
右边固定，左边自适应！右边固定，左边自适应！右边固定，左边自适应！
右边固定，左边自适应！右边固定，左边自适应！右边固定，左边自适应！
右边固定，左边自适应！右边固定，左边自适应！右边固定，左边自适应！
右边固定，左边自适应！右边固定，左边自适应！右边固定，左边自适应！
</div>
</div>
<div class="my-box">
<div class="my-box-left2">
<!--浮动的盒子优先显示-->
我是右边
</div>
<div class="my-box-right2">
左边固定，右边自适应！左边固定，右边自适应！左边固定，右边自适应！
左边固定，右边自适应！左边固定，右边自适应！左边固定，右边自适应！
左边固定，右边自适应！左边固定，右边自适应！左边固定，右边自适应！
左边固定，右边自适应！左边固定，右边自适应！左边固定，右边自适应！
左边固定，右边自适应！左边固定，右边自适应！左边固定，右边自适应！
左边固定，右边自适应！左边固定，右边自适应！左边固定，右边自适应！
</div>
</div>
</body>
</html>
文章对你有帮助吗？
- 一般[0]
- 很赞[0]
- 没用[0]
- 垃圾[0]
- 无语[0]
