沫沫金:2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开

简介: 做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果。这种想起来很简单做起来很麻烦的事情今天你有好方案了。--不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列自适应的话。

做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果。这种想起来很简单做起来很麻烦的事情今天你有好方案了。


--不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列自适应的话。亲自试过了,没用 谁愿意可以也试试——谁试谁知道^&^


--更不要为了在css中实现右列自动获取宽度值而使用“expression()”,不想吐槽后期谁维护谁知道——造孽呀!


正文来了:最新的组合实现左列固定宽度右列宽度自适应方案如下


.left{
    width:546px;
    height:91px;
}
.right{
    width:100%;
    height:91px;
}

重点看下面的div结构

<div class="right">
    <div class="left"></div>
</div>

仔细对比你就会发现,只需要让left层放到right层里面就OK了,搞定j_0015.gif(欢迎大家添加 976 465 669 本人的QQ交流最新最流行的技术和项目工作互换)本人在古都西安

目录
相关文章
|
10月前
|
人工智能 编解码 API
刚刚,通义万相模型能力重磅升级!
刚刚,通义万相模型能力重磅升级!
|
搜索推荐 应用服务中间件 nginx
Nginx系列教程(05) - 虚拟主机配置
Nginx系列教程(05) - 虚拟主机配置
1096 0
|
存储 NoSQL 数据挖掘
MongoDB 实时分析案例
【5月更文挑战第7天】
495 0
|
Java 数据库连接 mybatis
mybatis plus字段为null或空字符串把原来的数据也更新了,只需要注解
mybatis plus字段为null或空字符串把原来的数据也更新了,只需要注解
537 0
|
运维 监控 安全
【ELK入门】Elastic中文社区运维监控实战之架构篇
阿里云MVP曾勇撰写的《ELK运维监控入门实战》系列,以Elasticsearch中文社区网站运维监控体系搭建作为案例,讲解了ELK监控系统的相关原理和技术实现,可作为对ELK感兴趣的同学的入门级文章。本篇作为第一篇,介绍了项目背景和技术架构。
7019 0
|
存储 缓存 网络协议
TCP vs UDP:揭秘可靠性与效率之争
在网络通信中,TCP和UDP是两种最常用的传输层协议。本文将深入探讨TCP和UDP之间的区别,包括连接方式、服务对象、拥塞控制、流量控制和首部开销等方面,帮助读者在不同应用需求下选择适合的协议。无论你是技术爱好者还是网络工程师,这篇文章定能帮助你了解并应用TCP和UDP的差异,提升你的网络传输效率和可靠性。
1760 1
|
存储 Python
uwsgi部署python web项目
uwsgi部署python web项目
613 0
uwsgi部署python web项目
|
前端开发 JavaScript 搜索推荐
浏览器之性能指标-FID(一)
浏览器之性能指标-FID(一)
565 0
|
数据采集 机器学习/深度学习 运维
《数据中台架构:企业数据化最佳实践》:感受数据中台建设五步法
《数据中台架构:企业数据化最佳实践》:感受数据中台建设五步法
1636 0
《数据中台架构:企业数据化最佳实践》:感受数据中台建设五步法
|
SQL 存储 人工智能
[GCP]BigQuery大数据产品系列分析介绍
介绍GCP大数据相关产品能力系列介绍
2794 1
[GCP]BigQuery大数据产品系列分析介绍