search

Home  >  Article  >  Web Front-end  >  Example of webkit-box layout page in CSS3_html/css_WEB-ITnose

Example of webkit-box layout page in CSS3_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:48:271215browse

之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局；

接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例）

  • 三列自适应布局    

    •        

     

     

     

     

    1

     

    2

     

    3

     


    如图：

  • 三列布局，一列定宽，其余两列按1：2的比例自适应

    •  

     

     

     

    200px

     

    比例1

     

    比例2

     


    As shown in the picture:

  • A common web page The basic layout of

    • Header

    Fixed width 200

    Scale 3

    Scale 1

    Footer


    As shown in the picture:

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：[Jsoup Learning Etiquette] Eliminate untrusted HTML (to prevent XSS attacks)_html/css_WEB-ITnoseNext article：[Jsoup Learning Etiquette] Eliminate untrusted HTML (to prevent XSS attacks)_html/css_WEB-ITnose

    Related articles

    See more