css左右布局的几种实现方式和优缺点
记录一下左右布局的实现方式,实现的具体效果是,左侧固定宽度,高度适中等于父元素的高度,父元素的高度由右侧内容决定:
html代码如下:
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
1.flex布局实现左右布局,css代码如下:
.parent{
width: 600px;
margin: 100px auto 0;
background: red;
display: flex;
}
.left{
flex: 100px 0 0;
background: green;
}
.right {
flex: 1;
text-align: center;
font-size: 36px;
background: yellow;
}
效果图:
优点:只依靠css实现布局要求,书写方便,很容易记住。
缺点:pc端兼容性不好,对于手机项目的开发,也需要兼容。
2.使用浮动
.parent{
width: 600px;
margin: 100px auto 0;
background: red;
}
.left{
width: 100px;
height: 100%;
float: left;
background: green;
}
.right {
margin-left: 100px;
text-align: center;
font-size: 36px;
background: yellow;
}
效果图:
从上面的图,我们可以看到,虽然右侧宽度自适应了,但是我们尽管给左侧设置了height: 100%,也不能让左侧跟随右侧内容撑开高度,只能通过js去设置。
优点:
缺点:左侧高度需要通过js去设置
3.左侧定位
.parent{
width: 600px;
margin: 100px auto 0;
background: red;
position: relative;
}
.left{
width: 100px;
height: 100%;
position: absolute;
background: green;
left: 0;
top:0;
}
.right {
margin-left: 100px;
text-align: center;
font-size: 36px;
background: yellow;
}
效果图:
优点:兼容性好,纯css实现
缺点:相对于flex,代码多一些
css左右布局的几种实现方式和优缺点的更多相关文章
- 实现CSS等分布局的4种方式
× 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...
- 实现CSS等分布局的5种方式
前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- Android学习系列(二)布局管理器之线性布局的3种实现方式
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39643669 LinearLayout是Android控件中的线性布局控件,它包括的子控件 ...
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
- css布局 - 垂直居中布局的一百种实现方式(更新中...)
首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...
- css居中布局的几种方式
一.水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置widt ...
- CSS布局的四种定位方式
1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...
- html5 中的 css样式单 的 两种调用方式的区别
在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...
随机推荐
- myeclipse db browser 新建数据源
Myeclipse 新建数据源 一.打开myeclipse(打开了当我没说) 二.在window选项中找到show view ,点击other,输入db,选择DB Browser 三.在DB Brow ...
- SpringMVC表单中post请求转换为put或delete请求
1.在web.xml文件中配置 <!-- HiddenHttpMethodFilter过滤器可以将POST请求转化为put请求和delete请求! --> <filter&g ...
- iOS,点击button拨打电话
//按钮点击拨打电话 -(void)kfclick:(UIButton *)btn { [[UIApplication sharedApplication] openURL:[NSURL URLWit ...
- [2017-05-31]Abp介绍和经验分享-目录
很久没动博客了,人比较懒. 最近想写点啥,主要就介绍下ABP框架和我这两年的使用经验. 文档翻译之类的工作就算了,需要的请参考: 官方文档 PS:官方文档末尾有中文文档的链接,这里就不贴了 先列个提纲 ...
- 我的Markdown的利器——Markdown Here、有道云笔记、iPic
Markdown逐渐成为大家文章编辑的首选,这里推荐两个比较冷门的Markdown工具. 用什么当做Markdown的主力工具? 网上有很多人推荐的Markdown的工具包括专业的Markdown工具 ...
- Tomcat会话保持之session server
author:JevonWei 版权声明:原创作品 Tomcat会话保持之session server 拓扑图 环境 tomcatA 172.16.253.108 tomcatB 172.16.253 ...
- display:inline-block间隙问题
display:inline-block 是让块级元素变成行内元素 在一行显示, 然而不幸的是,它并没有得到所有浏览器的支持,比如ie6.7和古老一点的firefox完全无视它,由于firefox的老 ...
- 短视频 SDK 功能点技术实现方式详解
第三方短视频解决方案作为快速切入短视频行业的首选方式,选择一款功能齐全.性能优异的短视频解决方案十分重要. 今天我们来谈谈短视频 SDK 6大重要功能点及其技术实现方式. 短视频拍摄 断点续拍 指在拍 ...
- JMeter打开脚本失败 如何解决?
最近有碰到JMeter打开之前的脚本,报错了,见下图: 后来发现这是因为之前保存脚本的 jmeter 和这次打开脚本的 jmeter 版本不一致(图一)或者版本一致而插件没有保持同步(图二)的原因: ...
- 自制mpls ldp实验
实验步骤 步骤1:完成EIGRP BGP 及宣告配置 步骤2:完成LDP 的配置 过程校验 步骤1:校验和理解LDP 邻居关系的发现和邻接关系的建立 R4#show mpls ldp discover ...