zoukankan      html  css  js  c++  java
  • DIV+CSS布局(三)

    1.float浮动属性

      left左浮动   right右浮动

    2.clear 清除浮动

      clear:both

    3.overflow  溢出处理

      hiddle 隐藏超出层大小的内容

      scroll 无论内容是否超出层大小都添加滚动条

      auto 超出时自动添加滚动条

    eg:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Div+Css布局(浮动以及溢出处理)</title>

        <style type="text/css">

            body{

                padding: 0px;

                margin: 0px;

            }

            .div{

                960px;

                height: 600px;

                margin: 0 auto;

                background-color: #f1f1f1;

            }

            .left{

                float: left;

                260px;

                height: 460px;

                background-color: #cccccc;

            }

            .right{

                float: right;

                690px;

                height: 460px;

                background-color: #dddddd;

            }

            .bottom{

                clear: both;

                200px;

                height: 960px;

                background-color: red;

            }

            .jianjie{

                260px;

                height: 20px;

                background-color: red;

            }

        </style>

    </head>

    <body>

        <div class="div">

            <div class="left">

                <div class="jianjie">

                    最后一节课最后一节课最后一节课最后一节课最后一节课

                </div>

            </div>

            <div class="right"></div>

            <div class="bottom"></div>

        </div>

    </body>

    </html>

  • 相关阅读:
    BZOJ4039 : 集会
    BZOJ3655 : 神经错乱数
    World Finals 2017爆OJ记
    Petrozavodsk Summer-2016. Ural FU Dandelion Contest
    XVII Open Cup named after E.V. Pankratiev. Grand Prix of America (NAIPC-2017)
    递归的逻辑(3)——递归与分治
    递归的逻辑(2)——特征方程和递归算法
    递归的逻辑(1)——递归关系模型
    整数的故事(4)——Karastuba算法
    整数的故事(3)——最小公倍数与哥德巴赫猜想
  • 原文地址:https://www.cnblogs.com/lzp1103/p/7911991.html
Copyright © 2011-2022 走看看