像div这样的块元素在默认定位下你是不用担心它在页面上自适应宽度的问题的，但是一旦它使用了绝对定位，它就不会乖乖的填满你需要的宽度了。
那么，这个时候我们应该怎么办呢?
答案是用left和right来处理。
我们只需要给DIV设定样式 left: 0; right: 0;
你的div就会像你需要的那样实现自适应了。
时间： 2024-08-04 00:03:46
CSS如何给一个绝对定位的元素设定自适应宽度
CSS如何给一个绝对定位的元素设定自适应宽度的相关文章
CSS实例：三列自由式布局 770-1024自适应宽度
css|自适应 这个例子是最典型实用的上中下,并且中间分三列的css布局,有以下2个特点: 1. 中间三列效果,可以任意实现单列背景色. 2. 整体最窄770px,最宽1024px,也就是说窗口小于770xp就出底部滚动条,如果大于1024px自动屏幕居中. 最外层的wrapper把所有内容都嵌套在里边,整体相对定位.max min已经很好的控制了最窄最宽值,但对IE没有作用.如果没有其他布局的穿插,这一层其实写在body内就可以,少一层嵌套. #wrapper{ width:auto; bor
Css实现左栏固定宽度，右栏自适应宽度实例
例 代码如下 复制代码 <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度,右栏自适应之绝对定位法</title> <style type="text/css">
[HTML/CSS]盒子模型，块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天,群里有朋友问起这个,就趁着学习一下,也算是查漏补缺吧,虽然,谈不上精通,但是了解,还是很有必要的. 盒子模型 css盒子模型分为两种,一种是遵循w3c标准的标准盒子模型,另外一种就是IE盒子模型. 标准盒子模型 IE盒子模型 通过上面两张图可以看出
CSS规范学习：闭合浮动元素
css|浮动|规范 闭合浮动元素 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢. 后来又有了一种新的方式,使用 :
详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100px的声明:left:100px 那么这条声明不会起到任何效果.还有z-index属性在这时也不会生效.也就是说我们平时如果不给某元素一个position属性的声明,那么它默认的就是我上述的这种情况,不过因为有了浮动,所以通
css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的顺序渲染 absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(非static)来进行定位 fixed:元素相对于浏览器window进行定位 relative:元素相对与它的正常位置进行定位,因此"left:20"就表示在元素正常位置的基础上,左移20像素的距离. float属
CSS网页制作技巧:隐藏网页元素的方法汇总
文章简介:CSS网页制作技巧:隐藏网页元素的方法汇总. 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }{ position: rela
认识CSS样式clip: 认识隐藏页面元素
在页面上,我们经常会用到radio, 比如性别:男,女,保密. 但我们不喜欢默认的radio样式!我们会用其他的来替代. 我最初的做法是, 用label显示,设置radio为隐藏! (即display:none;) 当我点击label的时候,同时触发radio的click事件. 即: ($是jquery) $(".label1").click(function(){ $(".radio1").click(); // 其他代码更改样式,让label显示
CSS 有关Position = absolute (绝对定位 是相对于谁而言)
CSS 有关Position = absolute (绝对定位 是相对于谁而言) css中有绝对定位法,以前一直搞不懂绝对定位是相对于谁而言的绝对定位. 现在搞清楚了,不是相对于父元素,也不是相对于BODY. 而是相对于所属元素树中,相邻最近的那个显示标识了position属性的元素. 比如 <div id="a" style="position:relative"> <div id="b">