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>

  • 相关阅读:
    DOS命令里面的EQ、NE、GT、LT、GE、LE分别是什么意思
    XCTF-ics-05(文件包含+preg_replace函数/e修正符下的代码执行漏洞)
    BUUCTF-[网鼎杯 2018]Fakebook(SSRF+联合注入绕Waf)
    [WesternCTF2018]shrine(SSTI+过滤)
    XCTF-simple unpack
    vulnhub-靶机Lampiao
    BUUCTF-[极客大挑战 2019]BabySQL(联合注入绕过waf)+[极客大挑战 2019]LoveSQL(联合注入)
    XCTF-open-source
    [CISCN2019 华北赛区 Day2 Web1]Hack World(二分法写布尔注入脚本)
    CTF中的序列化与反序列化
  • 原文地址:https://www.cnblogs.com/fxy0919/p/6076802.html
Copyright © 2011-2022 走看看