沫沫金: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交流最新最流行的技术和项目工作互换)本人在古都西安

目录
相关文章
|
4天前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
4天前
自适应日落动态卡通动画404页面模板
自适应日落动态卡通动画404页面模板
19 4
自适应日落动态卡通动画404页面模板
|
9月前
|
前端开发
前端项目实战肆-兼容条形打印机移动端单位用毫米设定(td版优化)
前端项目实战肆-兼容条形打印机移动端单位用毫米设定(td版优化)
69 0
|
iOS开发
iOS开发-调整文字之间间距
iOS开发-调整文字之间间距
253 0
|
前端开发
前端项目实战112-设置宽度按照内容自适应设置宽度
前端项目实战112-设置宽度按照内容自适应设置宽度
69 0
|
前端开发 JavaScript
css控制超出宽度 ...展示
css控制超出宽度 ...展示
170 0
|
前端开发
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
|
编解码
音视频开发: ffmpeg保持原视频比例增加黑色背景(画黑边)
音视频开发: ffmpeg保持原视频比例增加黑色背景(画黑边)
842 0
音视频开发: ffmpeg保持原视频比例增加黑色背景(画黑边)
|
Web App开发 前端开发 JavaScript
网页自适应跟随系统深色模式
近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。随着水果在 iOS 13 与 macOS Mojave 中添加了深色方式,除了 Linux 以外一切的主流操作系统都曾经完成了系统层级的深色方式。Linux 由于 DE、WM 的种类繁杂暂时没有统一的标准,但目前可以经过深色 GTK+ 主题、阅读器插件等方式完成“伪全局”深色方式。既然有了系统层级的适配,阅读器就可以读取深色方式开关,从而完成网页的自顺应。这就是新标准 prefers-color-scheme。
1015 0
网页自适应跟随系统深色模式
网页宽度一般设置多少才合适?
许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800600尺寸及1024768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.网页设计标准尺寸: 阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d 新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。
3649 0