当前位置:网站首页>使用float实现左中右布局,中间内容自适应
使用float实现左中右布局,中间内容自适应
2022-07-26 10:38:00 【songywaa】
使用float实现左中右布局,一定要注意中间div的位置问题
/*css*/
.left{
float:left;
width:200px;
}
.right{
float: right;
width:200px;
}
.center{
padding: 0 200px;/*使用margin也可以*/
}
<div class="box">
<div class="left">我是左边</div>
<div class="right">我是右边</div>
<div class="center">我是中间</div>
<!-- 在html中,中间自适应的div一定要放到最后边,因为左右div浮动不占高度,如果把中间div放到前边或者中间,就会把浮动元素挤到下边去 -->
</div>
边栏推荐
- 干货likeshop外卖点餐系统开源啦100%开源无加密
- [leetcode daily question 2021/4/23]368. Maximum divisible subset
- Uniapp uses the simple method signalr (only for web debugging, cannot package apps)
- 11 在 operator= 中处理“自我赋值”
- Introduction to Phoenix (Level 1: Phoenix installation, level 2: Phoenix basic grammar)
- MySQL速学笔记-2021-08-31
- [leetcode每日一题2021/2/14]765. 情侣牵手
- Issue 5: the second essential skill for College Students
- GIS方法类期刊和论文的综述(Introduction)怎么写?
- [leetcode daily question 2021/2/14]765. Lovers hold hands
猜你喜欢

centos8(liunx)部署WTM(ASP.NET 5)使用pgsql

2021-08-12函数递归_和鹏哥学习C语言

20210807#1 C语言程序结构

工厂模式详解

【论文下饭】Deep Mining External Imperfect Data for ChestX-ray Disease Screening
![[leetcode每日一题2021/2/14]765. 情侣牵手](/img/be/8639a05c733638bf0b3fdeb11abccf.png)
[leetcode每日一题2021/2/14]765. 情侣牵手

第7期:内卷和躺平,你怎么选

Navicat15 MySQL (centos7) connected to local virtual machine
![[leetcode daily question 2021/2/14]765. Lovers hold hands](/img/be/8639a05c733638bf0b3fdeb11abccf.png)
[leetcode daily question 2021/2/14]765. Lovers hold hands

Anaconda is used on vscode (the environment has been configured)
随机推荐
第5期:大学生入职必备技能之二
【机器学习小记】【风格迁移】deeplearning.ai course4 4th week programming(tensorflow2)
[machine learning notes] [style transfer] deeplearning ai course4 4th week programming(tensorflow2)
剑指Offer(九):变态跳台阶
.net operation redis set unordered collection
Oracle cannot start tnslistener service cannot start
RT-Thread 学习笔记(七)---开启基于SPI Flash的elmfat文件系统(中)
分布式锁解决方案之Redis实现
RT-Thread 学习笔记(八)---开启基于SPI Flash的elmfat文件系统(下)
.NET操作Redis String字符串
Dry goods likeshop takeout order system is open source, 100% open source, no encryption
Datav beautiful data screen production experience
比较器(Comparable与Comparator接口)
RT-Thread 学习笔记(六)--- 开启基于SPI Flash的elmfat文件系统(上)
Oracle create index
文案秘籍七步曲至----文献团队协作管理
干货likeshop外卖点餐系统开源啦100%开源无加密
MySQL速学笔记-2021-08-31
Okaleido ecological core equity Oka, all in fusion mining mode
【机器学习小记】【搭建循环神经网络及其应用】deeplearning.ai course5 1st week programming(keras)