【position:absolute;宽度自适应】的更多相关文章

position:absolute;宽度自适应

http://blog.csdn.net/isaisai/article/details/45640515 设置left:0,right:0…

absolute之后居中宽度自适应

position:absolute;之后居中宽度自适应,不用再设定宽度了   css代码如下: .promptBox{display:none;border:1px solid #ccc;padding:0;position:absolute;top:240px;left:35px;right:35px;z-index:8;}   如图:…

同一行多个div宽度自适应布局

主要运用到的是:布局神器display:table-cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 自动平均划分每个小模块,使其一行显示 第二个案例我们先看看图: 遇到上面这种布局,一般会用float来做,或者把每个li设置成display:inline-block;来做,并且都要设置给他们设置一个宽度,而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来,如果li都设置成display:t…

BFC之宽度自适应布局篇

说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应margin中.但是这么做是有个缺点的,就是我们每次都得知道float元素的宽度,然后赋予到块状元素的margin. 然而,我们在”BFC之浅析篇”中学习到BFC有一特性:BFC的区域不会与外部浮动元素重叠.并且利用了这一特性,实现了两栏自适应布局.我们再来回顾下. <!DOCTYPE html>…

老生长谈：css实现右侧固定宽度，左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: <div id="wrap"> <div id="sidebar" style="height:240px;">固定宽…

CSS实现高度和宽度自适应

其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewMarking.aspx.cs" Inherits="FirsteLite.OMS.Checking.NewMarking" %> <!DOCTYPE html PUBLIC "-//W3C//DTD…

老生长谈，温故知新：css实现右侧固定宽度，左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: <div id="wrap"> <div id="sidebar" style="height:240px;">固定宽…

CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime;} #right { float: right; width: 200px; background: lime;} #center { margin:0 200px; background: blue} html: <div id="left">left</div>…

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height:; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } position…

easyui-menu 宽度自适应

easyui-menu里的菜单项是从后端获取的,而这个组件提供的API配置只能设置一个固定宽度,当获取的菜单项字数较多时有可能显示不全.解决方法如下: <style> .myClass{font-size:20px} #ComputeDIV{position:absolute;visibility:hidden;} </style> <div class="myClass" id="ComputeDIV"></div>…

我的插件のinput文本框实现宽度自适应

先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="skyFi.github.io/skylor" /> <title>sk…

记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0…

前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应

前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? 下面提供这道题的五种解决方案: 首先要写好整个页面的布局(初始化等) <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { min-height: 100px; }…

CSS实现两列布局，一列固定宽度，一列宽度自适应方法

不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap"> <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div> <div id="content" styl…

[转]css实现左侧宽度自适应，右侧固定宽度

原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度,一边自适应宽度. 一般固定宽度是导航栏,自适应宽度的是主体内容显示区. 所以要实现这种布局,就先给出如下html结构: <div class="container"> <div class="sidebar">导航区域</div>…

css实现右侧固定宽度，左侧宽度自适应

https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单.我们先给出html结构: 12345 <div id="wrap">  <…

Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不过有一些兼容性问题. 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title…

css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以下两点: 1)让两个div并排到一行 2)让一个div宽度固定,另个div占据剩下宽度的空间 关于第一点,首先要明确,div属于块级元素,在文档标准流中单独占据一行.要想多个div在一行,就可以想办法让div脱离标准流,比如使用float或者absolute: 关于第二点,首先有一个宽度固定的div…

CSS学习笔记（6）--浮动，三列布局，高度宽度自适应

百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外框. 折腾了三天,最后在一个网站看到,左left浮动,右right浮动,中间啥都不用,既不用position也不用float,只要把center写在right后面就可以了! index.html <!DOCTYPE html> <html lang="en"> &l…

CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com…

CSS实现宽度自适应100%，宽高16:9的比例的圖片或者矩形

前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利于后期项目的维护. css同样可以实现这个问题,我们可以利用边距的百分比属性定义来优雅实现. 我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值, 设置内边距为高度的数值,最后用绝对定位把图片百分百填充到我们设置的区域里面 代码 HTML <div class="bo…

巧用 position:absolute

1.跟随性 下面这种方法更加简便以及更方便维护, 例如“西部世界”,由于不用将父元素设为position:relative,position:absolute的位置也就不用根据文字多少而重新进行top.left等位置的计算. <div class="item1">西部世界<i></i></div> <div class="item2"> <i></i> <img src=&qu…

实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding:…

ElementUI el-table 在flex下的宽度自适应问题

BUG:在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据,在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小. Debug:通过控制台发现组件生成的table的宽度是动态计算的,翻查源码,发现以下代码段 也就是说,组件的resize事件是绑定在this.$el上了,这应该就是的原因所在了. flex容器下的width:100%会一直向上继承,直到flex容器下第一级子元素,但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候,那么容器就不会…

table-cell实现宽度自适应布局

利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,padding有效, 而且一旦元素设置了float或者absolute,则table-cell也会失效. table-cell不兼容IE6,7.但是可以通过触发hasLayout来实现近似的效果. 以下可以实现宽度自适应布局: <div class="wrapper"> <img s…

定位 position: absolute & relative

[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以它前面 的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方. 2)如果设定TRBL,并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRB…

css position:absolute 如何居中对齐

写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center…

【总结】我所整理的float, inline-block还有position:absolute

这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu.com/question/24529373/answer/29135021 http://www.w3cplus.com/css/inline-blocks.html 感谢你们的无私分享以及钻研的精神. 浮动最早是用来实现文字环绕图片用的,而不是像现在很多地方用来砌砖头用. inline-bloc…

关于position:absolute的困惑

今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的position:absolute(注意:此时父级并没有设置position),然后用left:-999em将下拉菜单隐藏到屏幕左边,然后在父列表项中添加鼠标悬停伪选择器,ul li:hover ul{left:auto},这样,当鼠标移动到父列表项时,就会在合适的位置出现下拉菜单. html: <ul class…

position:absolute和float会隐式的改变display类型

position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效. float在IE6下的双倍边距bug就是利用添加display:inline来解决的 注意一点的是,position:…