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>

  • 相关阅读:
    后端开发应该掌握的 Redis 基础
    Code Review有什么好处?
    对不起,你那不叫努力,叫重复劳动
    老鸟程序员才知道的40个小技巧
    单例模式基础笔记
    最受IT公司欢迎的50款开源软件
    硬件:关于路由器、交换机、宽带猫的几个问题
    硬件:宽带猫(光猫)的基础知识
    python selenium模块使用出错解决,Message: ‘geckodriver’ executable needs to be in PATH
    python+selenium如何定位页面的元素,的几种定位元素的方法。
  • 原文地址:https://www.cnblogs.com/fxy0919/p/6076802.html
Copyright © 2011-2022 走看看