中新网1月12日电(记者贾靖峰)中国银监会有关负责人12日表示，将在风险可控、商业可持续前提下支持保障性住房建设，他并透露，2010年11月末经济适用房开发贷款同比劲增逾三成，经济适用房个人购房贷款则年劲增逾四成，但保障性住房贷款仍存在“风险缓释不足、还款保障难以落实”等问题。
最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS实现网页右边固定左边自适应布局
时间：2022-06-25 10:06:17 编辑：袖梨 来源：一聚教程网
一、右边固定左边自适应布局
右边的元素浮动
网页的渲染和网页的机构有很大的关系，最先出现的元素最先显示，右边的元素设置右浮动，左边的元素不浮动，但是设置margin-right，设置的值为右边元素的宽度。
CSS
| 代码如下 | 复制代码 |
|
#nav { width: 200px; float: right; overflow: hidden; } 互联网上面的网站，左右布局的占了很大一部分，在响应式设计没有出现以前，网页的宽度大多是固定960px，但是随着用户显示器屏幕越来越大，我们就需要尽可能的利用屏幕的宽度，一种典型的场景是右边的导航栏固定宽度，而我们希望左边的宽度可以随着浏览器的宽度而自动适应。 我们可以用js轻易做到这一点，但是我们希望只用css，这样更简洁。实现这个效果有两种方式，下面给大家介绍一下。 |
|
这种布局，菜单栏会出现在正文的上方，最先加载，但是如果是一些其它的内容，对seo优化不是很好。
css的负边距（negative margin）
这个方法是将一个宽度为100%的div的外边距（left-margin or right-margin）设置为某个负值，然后将其第一个子div的外边距（与父容器的边距同方向）设置为对应的正值，那么这个div就可以浮动并且自 适应浏览器宽度。
CSS代码
| 代码如下 | 复制代码 |
|
#nav { width: 200px; float: right; } |
|
这个例子还使用了一个css“hack”技术，那就是使用psuedo css清除浮动造成的父容器高度不会自动撑大的问题
二、左边固定 右边自适应
其一，左栏固定宽度，右栏自适应之对定位法：
| 代码如下 | 复制代码 |
右栏 |
|
看起来很美好，但是。。
由于左栏使用绝对定位，脱离了文档流，因此有一个缺陷，即当左栏高度大于右栏时，无法将container撑开，这个缺陷单单只看两栏布局并没有太大影响，但如果两栏布局下面有一个底栏，就会出现底栏与左栏重叠的情况：
| 代码如下 | 复制代码 |
右栏 |
|
我们再来看看第二种方法，左栏固定宽度，右栏自适应之负margin法：
| 代码如下 | 复制代码 |
右栏 |
|
这样无论两栏的高度如何变化都不会有问题了：
| 代码如下 | 复制代码 |
|
右栏 |
|
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21