资讯专栏INFORMATION COLUMN

三列布局,中间自适应,关于float和positon方法

joyqi / 2640人阅读

摘要:这种方法的局限性在于,必须设置父元素的高度为固定,因为的子元素已经脱离文档流,不能撑开父元素,或者会遮盖同级的兄弟元素。

三列布局,中间自适应,尝试了两种方法
float
.mydiv{

background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
overflow: auto;

}

.left {

float: left;
width: 160px;
height: 100px;
background: blue;
padding: 20px;

}

.right{

float: right;
width: 80px;
height: 300px;
background: blue;
padding: 20px;

}

.middle{

margin-left: 220px;
margin-right: 140px;
background: red;
height: 200px;
padding: 20px;

}
.clearfix{

clear: both;

}
看到一篇文章:http://www.barelyfitz.com/screencast/html-training/css/positioning/,里面有这么一句话:
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it.
“wrap around it”非常重要,float与absolute有类似的功能,在这一点上却大不相同,下面会讲到。


position

mydiv{
background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
position: relative;

}

left {
position: absolute;
left: 20px;
width: 160px;
height: 100px;
padding: 20px;

}

right{
position: absolute;
right: 20px;
width: 80px;
height: 260px;
padding: 20px;/*absolute已经脱离文档流,无法撑开父元素;*/

}

middle{
margin-left: 220px;
margin-right: 140px;
height: 200px;
padding: 20px;

}
需要设置父元素为relative,子元素的absolute才会相对于父元素绝对定位。
这种方法的局限性在于,必须设置父元素的高度为固定,因为absolute的子元素已经脱离文档流,不能撑开父元素,或者会遮盖同级的兄弟元素。
也就是说这种方法不能自适应高度布局。对于子元素高度不确定的情况这种方法也就不能使用了。当然用js脚本进行控制也可以。


关于absolute和float区别。
absolute是完全脱离文档流,两个设置了absolute的元素甚至都可以互相覆盖。
而关于float,W3C手册中有这么一句话:由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
对于普通流中的块框不存在,也就是说对于float元素、文档中的行内元素,浮动元素是存在的。表达有点晦涩???具体的说,float:left遇到float:left,会停下来并排显示而不是覆盖。而对于行内元素:图片和文字,会“wrap around it”,就是包围float元素。

但是float和absolute都会出现无法撑开父元素的问题:
这时候absolute就比较鸡肋了,在多栏不确定高度的布局中,absolute没有办法解决父元素自适应高度的问题(参考:http://www.barelyfitz.com/screencast/html-training/css/positioning/)而float可以有一些清除float的方法,上面采用了overflow: auto;和.clearfix方法。清除浮动绝对是个大问题,接下来也会继续学习。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49781.html

相关文章

  • 三列布局中间适应关于floatpositon方法

    摘要:这种方法的局限性在于,必须设置父元素的高度为固定,因为的子元素已经脱离文档流,不能撑开父元素,或者会遮盖同级的兄弟元素。 三列布局,中间自适应,尝试了两种方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...

    jsyzchen 评论0 收藏0
  • 构建静态页面 之 [ 布局 ]

    摘要:布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的 布局 描述 表示对页面中的显示效果进行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一种方式 水平居中 + 行内块级元素(text-a...

    andot 评论0 收藏0
  • 构建静态页面 之 [ 布局 ]

    摘要:布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的 布局 描述 表示对页面中的显示效果进行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一种方式 水平居中 + 行内块级元素(text-a...

    JessYanCoding 评论0 收藏0
  • 三列布局(左右固定,中间适应

    1、定位 我是左边,我是固定的 我是中间,我是自适应的,左边右边都position固定了,他们脱离了文档流,我终于得到机会挤进中间啦!只要我margin一下就没人会挡住我啦!我可真是个小机灵鬼(同时,我还是个自由人,我div写在开头中间结尾都可以呢) 我是右边,我也是固定的 *{ margin:0; padding: 0; } .l...

    aboutU 评论0 收藏0
  • 关于几种适应布局

    摘要:即自适应宽度元素定义一个父标签,并设置属性为为自适应宽度元素设置,应定宽元素宽度固定宽度元素设置属性为负值除此之外应注意结构中应先写自适应元素,再写固定宽度元素。 类型一 1,左右两侧,左侧固定宽度200px,右侧自适应占满 代码如下 左右两侧,左侧固定宽度200px,右侧自适应占满 .box{ width:600px; height:500px; ...

    Honwhy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<