zoukankan      html  css  js  c++  java
  • DIV布局之道一:DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排)、嵌套、覆盖(遮挡)。本文先讲解平铺(并排)方式。

    1、垂直平铺(垂直排列)

    请看如下代码

    CSS部分:

    CSS Code复制内容到剪贴板
    1. .lay1{ width:200pxheight:20pxborder:1px solid #FF6699;}   
    2. .lay2{ width:200pxheight:20pxborder:1px solid #FF6699;}   
    3. .lay3{ width:200pxheight:20pxborder:1px solid #FF6699;}  

    HTML部分:

    XML/HTML Code复制内容到剪贴板
    1. <div class="lay1"></div>  
    2. <div class="lay2"></div>  
    3. <div class="lay3"></div>  

    我们看到这里有三个DIV块,三个DIV块呈上下并列分布,这种方式就是常见的DIV “ 垂直平铺方式”,也是最为常见的布局网页的方式,预览效果:

    DIV垂直排列

    我们可以看到网页中有三个“方块”呈上下排列。

    2、水平平铺(水平排列):

    我们要让上例中的三个DIV块呈水平排列该如何改写代码呢?其实只要我们相应的样式中加一个float:left 即可:

    CSS部分:

    CSS Code复制内容到剪贴板
    1. .lay1{ width:100pxheight:20pxborder:1px solid #FF6699float:left}   
    2. .lay2{ width:100pxheight:20pxborder:1px solid #FF6699float:left}   
    3. .lay3{ width:100pxheight:20pxborder:1px solid #FF6699float:left}  

    HTML部分无需任何修改,预览效果:

    DIV水平排列

    这个时候,就把三个DIV块水平平铺了。不难吧?呲牙表情

  • 相关阅读:
    算法,折半查找--javascript版
    选择排序---堆排序算法(Javascript版) 降序排列
    常用的js正则总结
    前端工作流,集成解决方案,国内值得研究的
    gulp构建项目踩坑实战
    svg图片自适应div容器大小
    coffeeScript学习小结
    javascript正则匹配中文
    android开发中R文件丢失
    MySql 5.7密码查看或修改
  • 原文地址:https://www.cnblogs.com/minghualiyan/p/3559950.html
Copyright © 2011-2022 走看看