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>

  • 相关阅读:
    SYBASE 日志空间满了的几种情况
    命令行对jar包的解压和压缩
    SYBASE 常用 sp_configure
    SYBASE 删除数据库
    【转】从RGB色转为灰度色算法
    C# 指针操作图像 细化处理
    C# 指针操作图像 二值化处理
    C# 对象转换为byte[] ,byte[]还原对象
    javascript 简单加解密
    windows 2003 企业版 下载地址+序列号
  • 原文地址:https://www.cnblogs.com/fxy0919/p/6076802.html
Copyright © 2011-2022 走看看