Maison > interface Web > tutoriel HTML > 负边距(negative margin)实现自适应的div左右排版_html/css_WEB-ITnose

负边距(negative margin)实现自适应的div左右排版_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:57:08
original
1669 Les gens l'ont consulté

左右排版本来是可以这样实现的:两边都使用百分比,然后左右浮动。但是这样做满足不了下面这样的场景:

   在一个文章页面里面,分为左边的正文区域和右边的与文章关联的其他信息区域,我想让正文区域能随着用户的显示屏宽度变化而变化,这似乎百分比就能做到,但是如果使用百分比,左右两边都必须有一个固定的比值,那样右边也会随着用户显示屏的宽度变化,如果用户的显示屏很宽,那这右边就显得似乎国语宽了,正文无论多款是无所谓的,但是侧边最好是一个固定值。

   就像这种右图所示效果:    

   也就是说我需要一个左边自适应,而右边固定的左右布局,或者说某一边固定,另一边占据剩余部分,该如何做呢?

   我找到的最好的答案是使用负margin(配合浮动),下面概括一下原理:可以500%提高开发效率的前端UI框架!

   使用负margin可以使当前的div左边能容纳下面的div浮动上来,因此把右边的div摆在前面,左边的摆后面,右边的使用负margin就能让左边的浮上来,这样就遮住了右边的左半部分,只要右边再内部使用一个div,外左边距为左边的宽度就实现了左右的排版。


1、左边固定,右边自适应

   (1)右边使用margin-left值为200(刚好是左边的宽度)的宽度,那么左边就刚好能浮动上来。为什么说浮动上来呢,因为如果没有这个margin: 0 0 0 -200px;由于右边的宽度是100%,因此左边肯定是排在下面的。

   (2)左边虽然能浮动上来,但是右边和左边的内容是有重叠的

所以你还需要绿色部分的代码,右边再内部使用一个div,外左边距为左边的宽度



   

       

           这是右边部分
       

   

   

           这是左边部分
   

   这个产生的效果如下图:(图片区域宽度固定的,但是文字是占据这个div的剩余部分,这里右边没有紧贴边框是因为父div有较大padding的原因没能挤满,不要受误导)。可以500%提高开发效率的前端UI框架!

   提示:真正在实现的时候好像没必要左边必须写在后面,我试过,即使按从左到右书写也是可以的,但是很多大型网站都是反着写,我就按正规的来讲了。

 

 

2、右边固定,左边自适应

跟上一个最大的不同点就是,左右两个div容器的代码的前后位置换了,原因就是"float:rihgt"一定要在"float:left"前面。

.代码 

  1.   
  2.   
  3.             这是右边部分  
  
  •   
  •   
  •                 这是左边部分  
  •   
  •   
  •   

     

     


    3、左右各占一定百分比,这就简单了,把上面任意一种将200px改成比例值20%就实现了。

    .代码 

    1.   
    2.   
    3.   
    4.                 这是右边部分  
      
  •   
  •   
  •             这是左边部分  
  •   
  •   

     

     


    4、再加一栏,实现左中右三栏布局。这只要再加一栏,float为right的多空一些位置就行了。这里以按比例为例

    .代码 

    1.   
    2.   
    3.   
    4.                 这是右边部分  
    5.   
    6.   
    7.   
    8.             这是左边部分  
    9.   
    10.   
    11.             这是中间部分  
    12.   
    13.   

     

     


    5、实现框架页的效果(左右可分别出现滚动条,页面无滚动条):只要左右div各加position: absolute; overflow: scroll; height: 100%;左边再加left: 200px;即实现了,这里用了绝对定位,因此float属性可以干掉了。 可以500%提高开发效率的前端UI框架!

    .代码 

    1.   
    2.             height: 100%; left: 200px;">  
    3.   
    4.                 这里是右边部分  
    5.   
    6.   
    7.             height: 100%;">  
    8.             这是左边部分  
    9.   
    10.  
    Étiquettes associées:
    source:php.cn
    Article précédent:页面兼容必加css_html/css_WEB-ITnose Article suivant:在CSS3中图片3D翻转效果是这样做到的_html/css_WEB-ITnose
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal