html+css两栏布局的三种方法
一、
1. 左边div设置float:left 或者position: absolute 脱离文档流
2. 避免左边div遮住右边div,右边div设置margin-left:左边div的宽度
<style>.left {width: 300px;height: 500px;background-color: rgb(8, 167, 216);float: left;/* position: absolute; */}.right {width: calc(100% - 300px);height: 500px;background-color: rgb(228, 204, 80);margin-left: 300px;}
</style>
<body><div class="left"></div><div class="right"></div>
</body>
tip:calc可以动态计算宽高
二、
1. 左边div设置float:left 或者position: absolute 脱离文档流
2. 避免左边div遮住右边div,右边div设置overflow: hidden 触发 块级格式化上下文(BFC)
<style>.left {width: 300px;height: 500px;background-color: rgb(8, 167, 216);float: left;/* position: absolute; */}.right {width: 300px;height: 500px;background-color: rgb(228, 204, 80);overflow: hidden;}
</style>
<body><div class="left"></div><div class="right"></div>
</body>
三、flex布局
1. 给两个div添加父div并设置display: flex
2. 左div设置固定宽
3. 右div设置flex: 1,右div将会自动填充撑满父div的宽
tip:给右div设置宽度将不生效
<style>.box {display: flex;}.left {width: 300px;height: 500px;background-color: rgb(8, 167, 216);}.right {flex: 1;height: 500px;background-color: rgb(228, 204, 80);}
</style>
<body><div class="box"><div class="left"></div><div class="right"></div></div>
</body>
思想:固定一栏,对另一栏进行操作。本文固定左div,同理也可固定右div( float: right )。
html+css两栏布局的三种方法相关推荐
- CSS多栏布局-两栏布局和三栏布局
目录 前言 ------两栏布局 一.左列定宽,右列自适应 1.浮动+margin 2.浮动+BFC 3.定位 4.flex 5.浮动+负外边距 6.table布局 二.左列不定宽,右列自适应 1.f ...
- 两栏布局的几种实现方式
两栏布局的几种实现方式 通过以下四常见的方法均可以实现图中两栏布局的效果 侧边栏左浮动+正文部分overflow:auto 定位实现两栏布局 纯浮动形式 浮动+常规流 效果图 侧边栏左浮动+正文部分o ...
- html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
- PHP保留两位小数的三种方法
PHP保留两位小数的三种方法 ps:本人亲测,阿里云2核4G5M的服务器性价比很高,新用户一块多一天,老用户三块多一天,最高可以买三年,感兴趣的可以戳一下:阿里云折扣服务器 /*** PHP保留两位小 ...
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- Python除法保留两位小数点(三种方法实现)
Python除法保留两位小数点(三种方法实现) 前言序锦 学过编程我们都知道,无论什么语言,其实都是相通的,,当我们学会了并掌握好了一种语言后,我们再去了解另外一种语言,其实就很容易了,今天我们就来一 ...
- 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...
- css布局:table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
- 两栏布局,三栏布局,等高布局,流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
最新文章
- AFN 切换BaseUrl
- 简单搜索(多位自幂数)+数列网站
- ASP 投票系统所用技术小结
- 虚拟主机6大骗术,站长朋友小心了
- MySQL---数据库从入门走向大神系列(十五)-Apache的DBUtils框架使用
- 腾讯管家去除桌面快捷小图标
- SaaS系列介绍之十一: SaaS商业模式分析
- Angular的后院:组件依赖关系的解决
- idea引入本地jar包及打包
- Mac OS X新手入门
- 圆内接等边三角形的画法_几何画板绘制圆的内接正三角形的操作教程
- Unit iptables.service could not be found
- 鸿蒙系统的诗,苏轼诗词介绍 苏轼《,奥特曼名字大全,鸿蒙系统年底问世,,江城子》有哪几首词?...
- 做iOS自动化测试必须知道的一些知识
- python 按条件筛选行_Python之根据条件筛选特定行
- 《5K入门级项目实战:好来屋在线影院》之第 9 战 —— 电影信息管理
- 多协议标记交换MPLS
- iOS 事件分类及事件分发机制
- 趣店季报图解:营收环比降14% 大白汽车收入近6亿
- L1-038 新世界 (5 分)C语言