zoukankan      html  css  js  c++  java
  • css布局列表,自适应

    关于并列的三列布局结构,从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 HTML 结构的情况下用CSS实现:ABC,CBA,BAC 三种布局及在CBA排列下使B宽度自适应(三列总宽度100%);

    HTML 与 CSS如下:


    <!DOCTYPE html>
    <html>
    <head>
        <title>HTML/CSS</title>
        <style type="text/css">
           .container{
                 960px;
                 position: relative;
                 margin: 0 auto;
                 overflow: hidden;
           }
           .cola1,.cola2,.cola3,.colb1,.colb2,.colb3,.colc1,.colc2,.colc3{
              text-align: center;
              height: 100px;
              line-height: 100px;
              color: #fff;
              font-size: 24px;
           }
           .cola1{
                 float: left;
                 180px;
                 background-color: #f00;
           }
           .colb1{
                  600px;
                  float: left;
                  background-color: #0f0;
           }
           .colc1{
                 180px;
                 float: left;
                 background-color: #00f;
           }
           .cola2{
                 180px;
                 position: absolute;
                 right: 0;
                 top:0;
                 background-color: #f00;
           }
           .colb2{
                 auto;
                 margin:0 180px;
                 background-color: #0f0;
           }
           .colc2{
                 180px;
                 left: 0;
                 top: 0;
                 position: absolute;
                 background-color: #00f;
           }
           .cola3{
                 180px;
                 background-color: #f00;
                 position: absolute;
                 left: 600px;
                 top: 0;
           }
           .colb3{
                 600px;
                 float: left;
                 background-color: #0f0;
           }
           .colc3{
                 float: right;
                 180px;
                 background-color: #00f;
           }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="cola1">A</div>
            <div class="colb1">B</div>
            <div class="colc1">C</div>
        </div>
        <div class="container">
            <div class="cola2">A</div>
            <div class="colb2">B</div>
            <div class="colc2">C</div>
        </div>
        <div class="container">
            <div class="cola3">A</div>
            <div class="colb3">B</div>
            <div class="colc3">C</div>
        </div>
    </body>
    </html>

  • 相关阅读:
    跳出语句 break continue
    循环语句 for循环、while循环、do while循环
    选择语句
    判断语句
    方法入门
    ++运算与--运算
    js面向对象的几种方式----工厂模式、构造函数模式、原型模式
    JavaScript This 的六道坎
    前端必备,十大热门的 JavaScript 框架和库
    localStorage、sessionStorage详解,以及storage事件使用
  • 原文地址:https://www.cnblogs.com/fxy0919/p/6076802.html
Copyright © 2011-2022 走看看