记录一下左右布局的实现方式,实现的具体效果是,左侧固定宽度,高度适中等于父元素的高度,父元素的高度由右侧内容决定:

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左右布局的几种实现方式和优缺点的更多相关文章

  1. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  2. 实现CSS等分布局的5种方式

    前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...

  3. CSS【03】:CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  4. Android学习系列(二)布局管理器之线性布局的3种实现方式

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39643669 LinearLayout是Android控件中的线性布局控件,它包括的子控件 ...

  5. js的三种继承方式及其优缺点

    [转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...

  6. css布局 - 垂直居中布局的一百种实现方式(更新中...)

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

  7. css居中布局的几种方式

    一.水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置widt ...

  8. CSS布局的四种定位方式

    1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...

  9. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

随机推荐

  1. [目标检测]PVAnet原理

    创新点:基于Faster-RCNN使用更高效的基础网络 1.1 创新点 PVAnet是RCNN系列目标方向,基于Faster-RCNN进行改进,Faster-RCNN基础网络可以使用ZF.VGG.Re ...

  2. 把elipse非maven的Struts2+Spring+Ibatis项目导入Idea中

    1.按图示操作 2.选中自己要得到的项目 3.之后设定得到的项目放在哪里 项目得到之后,对项目点击右键Open Module Settings,点击Project,设置生成的编译文件存储路径 4.单击 ...

  3. 最强黑吃黑:WEBSHELL大马隐藏万能密码大全

    因为很多原因,很多新手都不会编写自己的大马,大多数新手都会通过百度去下载对应脚本的大马,然而这些webshell大马都是早期流传出来的,基本上都存在后门,可以通过万能密码登录,即使你修改i过密码了,怎 ...

  4. Pyinstaller(python打包为exe文件)

      需求分析: python脚本如果在没有安装python的机器上不能运行,所以将脚本打包成exe文件,降低脚本对环境的依赖性,同时运行更加迅速. 当然打包的脚本似乎不是在所有的win平台下都能使用, ...

  5. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  6. Java基础语法(三)---数组

    一.概念         同一种类型数据的集合.简单的来说就是一容器,用来装东西的. 使用数组的好处:可以自动给数组中的元素从0开始编号,方便操作这些元素. 二.一维数组的格式 格式1:元素类型 [ ...

  7. 7-zip 解压

    7-zip 解压 1.引入依赖文件 sevenzipjbinding.jar sevenzipjbinding-Allwindows.jar <!-- https://mvnrepository ...

  8. 根据本周本月本日来查询数据 C#winform数据查询

    这个我是在winform的页面上做的 1. 首先是在页面上添加3个lable   第一次点击lable会有相应的数据被查询出来  第二次点击同一个lable会刷新所有的数据 2.点击不同的label会 ...

  9. (八)、vpn-pptp部署

    中小型规模网站集群架构:VPN-PPTP : 矮哥linux运维群:93324526 前言: 你想管理机器吗? 你想更安全吗? 请安装VPN吧 部署 1.查看系统是否支持PPP [root@oldbo ...

  10. Cobbler批量部署CentOS

    简介 Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的命令即可完成PXE ...