zoukankan      html  css  js  c++  java
  • 横向两列布局

    网页常见布局方式一:

         float属性——使纵向排列的块级元素,横向排列

         margin属性——设置两列之间的间距

    一般包裹层中两个并排的div控制距离都在10~20之间

    当父包含块缩成一条时,用clear:both方法清除浮动无效,它一般使用紧邻后面的元素的清除浮动

    而当整个父层mainbody来清除浮动(父包含块缩成一条),我们用第二种方法:     overflow:hidden(隐藏属性,当设置隐藏属性是就不要设置高度值了)

             1、  如果希望并排的两个div间又间距可对左浮动进行设置

          #mainbody{100%;overflow:hidden;}

               .left{800px;float:left;margin-right:20px;}

        .left{140px;float:left;}

            2、更加优化的另一个方法(为网站提速)   

            #mainbody{100%;overflow:hidden;}

               .left{800px;float:left;}

        .left{140px;float:right;}

             当然这是只使用于横向两列布局,如果是三列以上就需要对其中的一个设置外边距margin的属性(因为浮动的特,在容器中一直沿着包裹层向左或者向右移)

    例:width:100%;overflow:hidden;用于清除浮动(清除浮动时,只设置宽度不行,必须设置overflow:hidden;才能实现效果)

    或clear:both;

     

  • 相关阅读:
    2017第17周四当前工作中困境与挑战思考
    2017第17周三
    2017第17周二
    最小可行产品
    《穷查理宝典》中三条最重要的学习方法
    机场打车有感
    2017第15周五
    2017第15周四
    三条经济学原理帮你做出正确的选择
    Mac通过安装Go2Shell实现“在当前目录打开iTerm2”
  • 原文地址:https://www.cnblogs.com/hq123/p/5988651.html
Copyright © 2011-2022 走看看