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

目录
相关文章
|
9月前
|
机器学习/深度学习
阿里Animate Anyone:让任何静态图像动起来
【2月更文挑战第17天】阿里Animate Anyone:让任何静态图像动起来
821 3
阿里Animate Anyone:让任何静态图像动起来
|
5月前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
8月前
|
Linux iOS开发 MacOS
【随手记】maplotlib.use函数设置图像的呈现方式
【随手记】maplotlib.use函数设置图像的呈现方式
81 0
|
9月前
绿色自适应网址发布页源码
绿色自适应网址发布页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
83 0
绿色自适应网址发布页源码
|
9月前
|
移动开发 前端开发 iOS开发
H5页面布局之图片液态化(自适应)处理简述
H5页面布局之图片液态化(自适应)处理简述
75 0
H5页面布局之图片液态化(自适应)处理简述
|
9月前
|
vr&ar
visionOS空间计算实战开发教程Day 11 标题动画
本文我们要在visionOS内实现一个标题输出的动画效果。主要讲ViewModifier协议,修饰符(modifier)应用于视图或另一个视图修饰符,生成原值的另一个版本。在希望创建一个可应用于不同视图的修饰符时可实现ViewModifier协议。
62 0
|
前端开发
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
|
编解码
音视频开发: ffmpeg保持原视频比例增加黑色背景(画黑边)
音视频开发: ffmpeg保持原视频比例增加黑色背景(画黑边)
1017 0
音视频开发: ffmpeg保持原视频比例增加黑色背景(画黑边)
|
Web App开发 前端开发 JavaScript
网页自适应跟随系统深色模式
近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。随着水果在 iOS 13 与 macOS Mojave 中添加了深色方式,除了 Linux 以外一切的主流操作系统都曾经完成了系统层级的深色方式。Linux 由于 DE、WM 的种类繁杂暂时没有统一的标准,但目前可以经过深色 GTK+ 主题、阅读器插件等方式完成“伪全局”深色方式。既然有了系统层级的适配,阅读器就可以读取深色方式开关,从而完成网页的自顺应。这就是新标准 prefers-color-scheme。
1222 0
网页自适应跟随系统深色模式