zoukankan      html  css  js  c++  java
  • 浮动的同级盒子顶对齐

    情景:四个盒子如下图布局,使用浮动,可以看到3和4是顶对齐的

    <body>
        <div class="w">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
        </div>
    </body>
    <style>
            .w{
                width: 1000px;
                margin: 0 auto;
            }
            .box1{
                background: rgb(226, 23, 23);
                height: 200px;
                width: 300px;
                float: left;
            }
            .box2{
                background: #008000;
                height: 100px;
                width: 400px;
                float: left;
            }
            .box3{
                background:#0000ff;
                height: 100px;
                width: 400px;
                float: left;
            }
            .box4{
                background: #000000;
                width: 300px;
                height: 50px;
                float: right;
                color: #ffebcd;
            }
        </style>

    此时会看到出现bug,4盒子上不去,解决方法是把4盒子放到2盒子和3盒子中间

     <div class="w">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box4">4</div>
            <div class="box3">3</div>
        </div>

  • 相关阅读:
    jQ插件开发规范(转)
    一个圆环形状的进度条。
    [转载]jQuery 图表插件 jqChart 使用
    作业.mp4
    嘣嘣嘣嘣嘣哥TnT
    我对GIT的认识`
    git的理解
    文章读后感
    团队作业7
    团队作业6
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8745628.html
Copyright © 2011-2022 走看看