position和float的结合运用

原创 2015年11月18日 16:50:38

  刚做的帮助中心还没有明白里面的奥妙,这里又碰到了,absolute让relative的可以不按照float的div约束。

   #content {

                 width:780px;
                 margin:0 auto; 
                 position:relative;
                 left:0;
                 clear:both;
                   
             }
             #contentLeft {
                 /*width:135px;*/
                

             }
                #contentRight {
             width:780px;
                 margin:0 auto; 
            <span style="color:#ff0000;">     position:absolute;</span>
                 left:645px;
          
             }

定义了上面的打的div和下面左右两个div,由于有head和foot的关系,因为header和footer都有relative,所以这里只能用left偏移来把右边的撑到右边。这里position:absolute是关键,否则右边的会会压到下面。

  

正常的用过absolute就会正常。


div的这些效果在H5体现最多。

CSS: float属性和position属性的区别和应用

在使用div+css进行网页制作时,我们经常需要对某些元素进行一些必要的定位,使其能按照我们预想的效果呈现在页面合适的位置上,而float和position便是实现这一效果的两种方法。 一、浮动(f...
  • fivedoumi
  • fivedoumi
  • 2016年03月10日 21:33
  • 1349

float和position:absolute脱离文本流的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行; CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当...
  • paediatrician
  • paediatrician
  • 2016年09月19日 10:43
  • 2378

精确计算时,不要使用float或double

照例,还是来一段Effective Java的内容。内容大家应该已经都熟悉,不过还是发现很多新人完全不清楚,所以拿来共享一下。 一、病例: Java codeSystem.out.prin...
  • qq_26222859
  • qq_26222859
  • 2016年09月20日 21:30
  • 1232

float与position属性

  • 2014年12月16日 23:37
  • 28KB
  • 下载

position float(持续补充中。。。)

1
  • toumingyumaohuiyi
  • toumingyumaohuiyi
  • 2016年10月28日 21:54
  • 345

通俗易懂CSS(一)-相对定位和绝对定位position和float

一、简述: CSS中有三种基本的定位机制:普通流、浮动和绝对定位。我们先看看他们的解释和描述: 普通流:默认情况下,所有框都在普通流中定位。按照你所写的html,顺序的排列,块级元素从上到下一个接...
  • jzdzhiyun
  • jzdzhiyun
  • 2017年12月13日 09:35
  • 109

CSS中的Position、Float属性详解

对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性...
  • andybbc
  • andybbc
  • 2016年01月27日 10:36
  • 254

用position:relative和float实现不定宽块级元素的居中

分析使用position:relative和float实现不定宽块级元素的居中
  • amghost
  • amghost
  • 2015年09月20日 12:31
  • 1521

对CSS中的Position、Float属性的一些深入探讨

对CSS中的Position、Float属性的一些深入探讨 盒子模型 在HTML中元素的盒子模型分为两种:块状元素、行内元素,请注意这里的块状元素(Block)和行内元素(In...
  • YLXB2
  • YLXB2
  • 2017年01月12日 21:32
  • 209

CSS布局 ——从display,position, float属性谈起

页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了《CSS Mastery》后...
  • judyge
  • judyge
  • 2015年11月18日 10:38
  • 152
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:position和float的结合运用
举报原因:
原因补充:

(最多只允许输入30个字)