css实现左边定宽右边自适应的5种方法总汇

时间: 2017-12-27阅读: 1683标签: 宽高

在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下:

<div class="box">
	<div class="left">左边定宽</div>
	<div class="right">右边自适应</div>
</div>


1、浮动布局

左边设置左浮动,右边宽度设置100%

.left{width:200px;float:left;background: red;}
.right{width:100%;margin-left: 200px;background: blue;}/*等于左边栏宽度*/


2.flex布局

父容器设置 display:flex;Right部分设置 flex:1 

.box{ display: flex;}
.left{width:200px;background: red;}
.right{width:100%;flex:1;background: blue;}/*等于左边栏宽度*/


3、使用负margin

首先需要修改html结构,为自适应部分添加容器 .right_content, 同时改变左右部分的位置。

html结构:

<div class="box">
  <div class="left">左边定宽</div>
  <div class="right">
     <div class="right_content">右边自适应</div>
  </div>
</div>

css代码:

*{margin:0;padding: 0;}
.left{width:200px;float:left;margin-right:-200px;background: red;}
.right{width:100%;float:left;}
.right_content{margin-left:200px;background: blue;}


4.绝对定位

左右两边都绝对定位  

.left{width:200px;background: red; position: absolute;left:0;}
.right{width:100%;background: blue;position: absolute;left:200px;}/*等于左边栏宽度*/


5.table布局

table(父级元素)与tabel-cell(两个子集元素)  

.box{display: table;width:100%;}
.left{width:200px;background: red; display: table-cell;}
.right{background: blue; display: table-cell;}

display:table-cell的元素具有以下特性:

text-align、vertical-align等对齐属性起作用,margin不起作用。宽高百分比值不起作用。
会生成虚拟的table、tr把自己包裹住,如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住,并一行等高显示
多个table-cell元素会占满被设置了display: table的元素的宽度,如果一个元素被设置了宽度,那么其他剩余的table-cell元素会占满剩下的宽度。当然,如果只有一个table-cell元素,就算设置了宽度也会占满table元素的宽度。
对设置了float、absolute的元素不起作用。且IE6、7不支持

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/285

js获取屏幕以及元素宽高的方法

网页正文部分上:window.screenTop ,网页正文部分左:window.screenLeft,屏幕分辨率的高:window.screen.height ,屏幕分辨率的宽:window.screen.width ,屏幕可用工作区高度:window.screen.availHeight

通过js代码来改变div的宽度

当做网页图片的切换时,有的做法是将两个div并排在一起,但是只能显示一个div的宽度,当要切换图片时将一个div的宽度从一个宽度值改为0,就实现了简单的图片替换了。 首先,我们将要更改宽度的div摆上来

使用js如何设置、获取盒模型的宽和高

使用内联样式的元素的宽和高。浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。计算一个元素的绝对位置(相对于视窗左上角)

网页中的各种上下左右宽高值

offset只读属性。width/height——显示出来的屏幕尺寸,top/left——相对于定位父元素的绝对位置.client只读属性。width/height——不带边框的offset,也不包含滚动条宽度top/left——内边距的外边缘与边框外边缘的距离,通常是边框宽度

JS中的offset

一、offsetWidth与offsetHeight:获取的是元素的实际宽高 = width + border + padding ,二:offsetLeft与offsetTop;offsetLeft:获取自己左外边框与父级元素的左内边框的距离 ,offsetTop:获取自己上外边框与父级元素的上内边框的距离

js动态获取浏览器或页面等容器的宽高

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些,有时候我们写了100%高度的时候,然后因为是当前页面的子页面,100%的只是父页面,而子页面有下拉条还有内容的话,一些东西就不能都获取到。

css保持div等高宽比

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例,通过2种方式来实现这种效果。

css中设置了宽度,div内容溢出不换行的的原因和解决方法

当我们为div标签声明了宽度,文本内容为单词或者纯数字的时候会出现文本越界的情况。原因是由于:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。

基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

基于实现元素的展开收缩,max-height,给定足够大的高度,就是言义上的任意高度,相对height来说比较灵活,两者的区别就是计算高度的过程,一个是由人为计算,一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高。

js获取浏览器/界面宽高的问题_以及兼容性实现方案

js获取浏览器/界面宽高的问题:clientHeight和clientWidth获取可视区域大小,scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全