css实现左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应。
1、利用 calc 计算宽度的方法
css代码如下:
.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box1>div{float: left;}
.left1{width: 100px;background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}
dom结构如下:
<div class="box" id="box1">
<div class="left1">左侧定宽</div>
<div class="right1">右侧自适应</div>
</div>
2、利用 float 配合 margin 实现
css代码如下:
.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{background: #09c;margin-left: 100px;}
dom结构如下:
<div class="box" id="box2">
<div class="left2">左侧定宽</div>
<div class="right2">右侧自适应</div>
</div>
3、利用 float 配合 overflow 实现
css代码如下:
.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{background: #09c;overflow: hidden;}
dom结构如下:
<div class="box" id="box3">
<div class="left3">左侧定宽</div>
<div class="right3">右侧自适应</div>
</div>
4、利用 position:absolute 配合 margin 实现
css代码如下:
.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left:;top:;width: 100px;background: yellow;}
.right4{margin-left:100px;background: #09c;}
dom结构如下:
<div class="box" id="box4">
<div class="left4">左侧定宽</div>
<div class="right4">右侧自适应</div>
</div>
5、利用 position:absolute 实现
css代码如下:
.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left:;top:;width: 100px;background: yellow;}
.right5{position: absolute;left: 100px;top:;right:;width: 100%;background: #09c;}
dom结构如下:
<div class="box" id="box5">
<div class="left5">左侧定宽</div>
<div class="right5">右侧自适应</div>
</div>
6、利用 display: flex 实现
css代码如下:
.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;background: yellow;}
.right6{flex:;background: #09c;}
dom结构如下:
<div class="box" id="box6">
<div class="left6">左侧定宽</div>
<div class="right6">右侧自适应</div>
</div>
7、利用 display: table 实现
css代码如下:
.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{width: 100px;background: yellow;}
.right7{background: #09c;}
dom结构如下:
<div class="box" id="box7">
<div class="left7">左侧定宽</div>
<div class="right7">右侧自适应</div>
</div>
实现效果如下图:
如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。
css实现左侧固定宽,右侧自适应的7中方法的更多相关文章
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- css实现两栏布局,左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- CSS基础布局--居中对齐,左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- css左右布局,左侧固定,右侧自适应
实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...
- 左侧固定,右侧自适应的布局方式理解margin负值理论
一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...
随机推荐
- 【学习】Zepto与jQuery 差别
前几天遇到一个项目,需要把jquery全部改成Zepto,当时因为自己没有实际经验,所以没有接.今天查了一下两者究竟有什么区别. 首先看到了这么一篇文章:http://www.bootcss.com/ ...
- flume自定义Source(taildirSource),自定义Sink(数据库),开发完整步骤
一.flume简单了解推荐网站(简介包括简单案例部署): http://www.aboutyun.com/thread-8917-1-1.html 二.我的需求是实现从ftp目录下采集数据,目录下文件 ...
- 张高兴的 UWP 开发笔记:应用内启动应用 (UWP Launch UWP)
需求:在 A 应用内启动 B 应用,如果 B 应用未安装则跳转应用商店搜索. 启动方式使用 Uri 启动,本文使用尽可能简单,并且能拿来直接用的代码.不涉及启动后的应用数据交互,如需深入了解,请戳 M ...
- UVa 1608,Non-boring sequences
好诡异的一个题啊 紫书上关于从左边找还是从两边往中间找的讨论没有看懂,怎么一下就找到唯一的元素了(⊙_⊙?) 方法就是用的书上讲的方法,类似于uva 11572,不过这个题需要预处理存下两边的最近的相 ...
- 什么是UUID?
1.定义 UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准,也是被开源软件基金会 (Open Software Foundatio ...
- maven overlays 合并多个war
http://kyfxbl.iteye.com/blog/1678121 http://jdonee.iteye.com/blog/794226
- 在centos7上实现LAMP的全过程及实现wordpress
原理 http使用方法一编译安装,php独立服务fpm实现. 软件版本 在本次实验中,我们需要用到的软件版本如下: apr-1.6.2 apr-util-1.6.0 httpd-2.4.28 mari ...
- SVN.服务器迁移方法
SVN项目, 源服务器 : 10.10.13.48 目标服务器: 10.10.13.129 要把SVN项目从.48上迁移到.129上. 做法: 准备: 版本库:vos 源服务器 : 10.10.1 ...
- Java运行时内存划分与垃圾回收--以及类加载机制基础
----JVM运行时内存划分----不同的区域存储的内容不同,职责因为不同1.方法区:被线程共享,存储被JVM加载的类的信息,常量,静态变量等2.运行时常量池:属于方法区的一部分,存放编译时期产生的字 ...
- win8在安装office visio2003出现“请求的操作需要提升”,解决方法
单击右键,然后以管理员身份运行即可