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

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

Jun 24, 2016 am 11:57 AM
div margin composition 自适应

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

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

   就像这种右图所示效果:    

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

   我找到的最好的答案是使用负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.  
    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

    Article chaud

    Combien de temps faut-il pour battre Split Fiction?
    3 Il y a quelques semaines By DDD
    Repo: Comment relancer ses coéquipiers
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Comment obtenir des graines géantes
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Musée à deux points: toutes les expositions et où les trouver
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

    Article chaud

    Combien de temps faut-il pour battre Split Fiction?
    3 Il y a quelques semaines By DDD
    Repo: Comment relancer ses coéquipiers
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Comment obtenir des graines géantes
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Musée à deux points: toutes les expositions et où les trouver
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

    Tags d'article chaud

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Quelles sont les compétences opérationnelles pour la composition Excel ? Quelles sont les compétences opérationnelles pour la composition Excel ? Mar 20, 2024 pm 05:01 PM

    Quelles sont les compétences opérationnelles pour la composition Excel ?

    Comment configurer la luminosité adaptative du contenu sur Windows 11 Comment configurer la luminosité adaptative du contenu sur Windows 11 Apr 14, 2023 pm 12:37 PM

    Comment configurer la luminosité adaptative du contenu sur Windows 11

    Analyse et solutions aux causes d'une typographie mal alignée dans WordPress Analyse et solutions aux causes d'une typographie mal alignée dans WordPress Mar 05, 2024 am 11:45 AM

    Analyse et solutions aux causes d'une typographie mal alignée dans WordPress

    Les nouvelles fonctionnalités de Poe sont tellement puissantes ! Même sans aucune compétence en programmation, vous pouvez créer un éditeur de mèmes en 10 minutes Les nouvelles fonctionnalités de Poe sont tellement puissantes ! Même sans aucune compétence en programmation, vous pouvez créer un éditeur de mèmes en 10 minutes Aug 02, 2024 am 12:23 AM

    Les nouvelles fonctionnalités de Poe sont tellement puissantes ! Même sans aucune compétence en programmation, vous pouvez créer un éditeur de mèmes en 10 minutes

    Explication détaillée des propriétés de bordure CSS : padding, margin et border Explication détaillée des propriétés de bordure CSS : padding, margin et border Oct 21, 2023 am 11:07 AM

    Explication détaillée des propriétés de bordure CSS : padding, margin et border

    Opérations de base de la disposition des tableaux Excel Opérations de base de la disposition des tableaux Excel Mar 20, 2024 pm 03:50 PM

    Opérations de base de la disposition des tableaux Excel

    Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div Jan 30, 2023 am 09:23 AM

    Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div

    Discuz Editor : un outil de mise en page de publication efficace Discuz Editor : un outil de mise en page de publication efficace Mar 10, 2024 am 09:42 AM

    Discuz Editor : un outil de mise en page de publication efficace

    See all articles