当前位置:网站首页>使用定位实现左中右布局,中间内容自适应
使用定位实现左中右布局,中间内容自适应
2022-07-26 10:38:00 【songywaa】
定位有俩种方式:
1、左右使用定位,中间正常;
2、左中右都使用定位;
第一种方法:(注意div.center的位置)
.box{
position: relative;
}
.left{
position:absolute;
left: 0;
width:200px;
}
.right{
position:absolute;
right: 0;
width:200px;
}
.center{
padding:0 200px;
}
<div class="box">
<div class="left">我是左边</div>
<div class="right">我是右边</div>
<div class="center">我是中间</div>
<!--注意center的位置,!!!!放到最后,因为定位脱离文档流不占高度-->
</div>
第二种方法
.box{
position: relative;
}
.left{
position:absolute;
left: 0;
width:200px;
}
.right{
position:absolute;
right: 0;
width:200px;
}
.center{
position: absolute;
left: 200px;
right:200px;
}
<div class="box">
<div class="left">我是左边</div>
<div class="center">我是中间</div>
<div class="right">我是右边</div>
</div>
边栏推荐
- .NET 开源框架在工业生产中的应用
- 12 复制对象时勿忘其每一个成分
- Uninstall Meizu app store
- [leetcode每日一题2021/2/18]【详解】995. K 连续位的最小翻转次数
- RT-Thread 学习笔记(五)---编辑、下载、调试程序
- L2-005 set similarity (intersection of vector and set)
- 2021-08-12函数递归_和鹏哥学习C语言
- C language callback function
- [notes on machine learning] [building a cyclic neural network and its application] deeplearning ai course5 1st week programming(keras)
- 剑指Offer(四十九):把字符串转换成整数
猜你喜欢
Error[Pe147]: declaration is incompatible with '错误问题
Redis Docker实例与数据结构
[paper after dinner] deep mining external perfect data for chestx ray disease screening
[leetcode daily question 2021/5/8]1723. The shortest time to complete all work
[leetcode daily question 2021/4/29]403. Frogs cross the river
[leetcode每日一题2021/4/29]403. 青蛙过河
Oracle cannot start tnslistener service cannot start
putty的使用教程
[leetcode daily question 2021/8/30]528. Choose randomly by weight [medium]
第5期:大学生入职必备技能之二
随机推荐
并行、并发及对于高并发优化的几个方向
JS对象赋值问题
datav漂亮数据屏制作体验
STM32 阿里云MQTT esp8266 AT命令
MD5 encryption
【机器学习小记】【搭建循环神经网络及其应用】deeplearning.ai course5 1st week programming(keras)
第5期:大学生入职必备技能之二
Interview questions and answers for the second company (2)
MySQL速学-2021-09-01
C语言计算日期间隔天数
Oracle cannot start tnslistener service cannot start
剑指Offer(四十四):翻转单词顺序序列
一文详解Nodejs中fs文件模块与path路径模块
Oracle创建索引
剑指Offer(九):变态跳台阶
Dry goods likeshop takeout order system is open source, 100% open source, no encryption
[转]ArcGIS中判断两个Geometry之间的关系
.net operation redis sorted set ordered set
鹏哥C语言第四课(3)
Okaleido ecological core equity Oka, all in fusion mining mode