CSS之左定宽度右自适应宽度并且等高布局

一、两列布局:左边固定宽度,右边自适应宽度

方法1:浮动布局

采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果

HTML:

这里写图片描述

CSS:

这里写图片描述

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值,大家可以点击查看上面代码的DEMO

方法2:浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果

HTML:

这里写图片描述

CSS:

这里写图片描述

二:等高布局(参见等高布局一文)

三:实现最小高度

这里写图片描述

上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。这样一来,我们可以交作业了,也完面了这个面试题的考试。为了让大家更能形象的了解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407094.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows Server 2003 R2与SP2 的区别

关于 R2,很多人分不清楚 R2 与 SP2 的关系,总是有人提出“R2 与 SP2 有什么区别”、“我应该将 Server 2003 升级到 R2 还是 SP2”之类的问题。其实 R2 与 SP2 两者并不冲突…… Windows Server 2003 R2 是微软为了扩展 Windows Server 2003 系统的功能而…

Linux scp 免密码 传输文件

SCP的使用 背景介绍 最近项目是集群化部署(由 node1,node2,node3 三台 CentOS 7.4 的虚拟机构成)。 但是,涉及到跨机器同步文件的问题,想通过写shell文件实现,用 crontab 设置定时任务&#…

ActiveX控件打包成Cab置于网页中自动下载安装

From: http://www.iteye.com/topic/110834 makeCAB.rar (188.5 KB) [背景] 做过ActiveX控件的朋友都知道,要想把自己做的ActiveX控件功能放在自己的网页上使用,那么用户在客户端就必须进行本地的注册,也就是说用户得首先要把该ActiveX控件(te…

我的博客我做主

今天刚刚注册了我的博客,本人将在这里叙写关于编程的方方面面新的知识点。首先声明,本人的编程还是个刚刚入门,所以现在只是向老前辈们学习,如果有比较经典的知识点,我会把把学到的新的知识点留在自己的博客上&#xf…

CSS之创建等高列布局之一

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置自己的背景色,那么它…

转这10句话

第一句 如果我们之间有1000步的距离  你只要跨出第1步 我就会朝你的方向走其余的999步 第二句 通常愿意留下来跟你争吵的人  才是真正爱你的人 第三句 付出真心 才会得到真心  却也可能伤得彻底 保持距离 就能保护自己  却也注定永远寂寞 第四句 有时候 不…

一篇介绍VC开发OCX的文章,写得太棒了!!!

From: http://www.cnblogs.com/gengaixue/archive/2010/08/13/1799112.html VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程 开篇语:最近在弄ocx控件发布到asp.net网站上使用,就是用户在使用过程中,自动下载安装ocx控件。&…

Taro+react开发(37)箭头函数括号加个return

{getLearnList.map((item, index) > (<View><View key{index} className"img-title"><Text>xueyuan</Text><Image mode"widthFix" src{item.imgCoverPath} /></View></View>))}

使用webpack打包后的vue项目如何运行(express)

我们知道使用webpack打包vue项目后会生成一个dist文件夹&#xff0c;dist文件夹下有html文件和其他css、js以及图片等&#xff0c;那么打包后的文件该如何正确运行呢&#xff1f; 倘若直接打开html文件&#xff0c;会报如下错误&#xff1a; 那么该如何运行呢&#xff1f;其实…

数据链路层与交换机

1. 数据链路层的功能是什么&#xff1f;负责网络中相邻节点之间可靠的数据传输&#xff0c;并进行有效的流量和差错控制。具体地讲&#xff0c;以一次数据发送为例&#xff0c;数据链路层的作用包括数据链路的建立、维护与拆除、帧包装、帧传输、帧同步、帧的差错控制以及流量控…

编译vo-aacenc遇到的问题

sourceforge更新了vo-aacenc到0.1.3&#xff0c;就把自己的编码器也更新到最新。编译过程中无聊多测试了一下 发现一个小问题http://sourceforge.net/projects/opencore-amr/files/vo-aacenc/下载后解压 1 [gonglinux vo-aacenc-0.1.3]$ pwd 2 /home/gong/ff4android/vo-aacenc…

CSS之创建等高列布局之二

3. 给容器div使用单独的背景色&#xff08;流体布局&#xff09; 这种布局可以说是就是第二种布局方法&#xff0c;只是这里是一种多列的流体等高列的布局方法。前面也说过了&#xff0c;其实现原理就是给每一列添加相对应用的容器&#xff0c;并进行相互嵌套&#xff0c;并在…

Oracle中Number(p,s)的意义

From: http://www.chinabyte.com/biz/cbfwq/394/2650894.shtml number(p,s) p:1~38 s:-84~127 p>0&#xff0c;对s分2种情况分析&#xff1a; 1. s>0 精确到小数点右边s位&#xff0c;并四舍五入。然后检验有效数位是否<p&#xff1b;如果s>p&#xff0c;小数点…

Taro+react开发(38)注意请求接口的/

//获取课程课期 export const getLastOfflineLessonByCourseCode data > {return request.get(${vdp}/offlineLesson/getLastOfflineLessonByCourseCode,data); };

git 上传代码步骤

接下来 第一步&#xff1a;建立git仓库 cd到你的本地项目根目录下&#xff0c;执行git命令&#xff0c;此命令会在当前目录下创建一个.git文件夹。 git init 第二步&#xff1a;将项目的所有文件添加到仓库中 git add . 这个命令会把当前路径下的所有文件&#xff0c;添加…

CSS之创建等高列布局之三

4. 使用正padding和负margin对冲实现多列布局方法 这种方法很简单&#xff0c;就是在所有列中使用正的上、下padding和负的上、下margin&#xff0c;并在所有列外面加上一个容器&#xff0c;并设置overflow:hiden把溢出背景切掉。下面一起来看代码 HTML: CSS: 这里代码的关键…

一个 人 的 态度 决定 他 成功 的 高度

一个 人 的 态度 决定 他 成功 的 高度转载于:https://blog.51cto.com/sunwei/122390

var arr = [] 与 var arr = new Array();

new关键字的使用除了在需要实例化一个对象&#xff0c;或罕见的需要延时加载数据的情况外&#xff0c;你基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作&#xff0c;为了效率起见&#xff0c;你应该始终使用对象符号。 new Array() 会实例化…

将windows下编辑好的文件(GBK)转换成Linux下的格式(UTF8)

背景&#xff1a;一般我们在windows上编辑好的文件默认编码是GBK&#xff0c;而且换行符是^M&#xff0c;为了将这些文件用在linux上&#xff0c;我们一般会将它们转换成Linux下的文件格式&#xff0c;即去掉^M&#xff0c;且将文件格式转换成UTF8。 这时&#xff0c;就会用到两…