关于并列的三列布局结构，从左至右依次为 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{
             width: 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;
             width:180px;
             background-color: #f00;
       }
       .colb1{
              width: 600px;
              float: left;
              background-color: #0f0;
       }
       .colc1{
             width: 180px;
             float: left;
             background-color: #00f;
       }
       .cola2{
             width: 180px;
             position: absolute;
             right: 0;
             top:0;
             background-color: #f00;
       }
       .colb2{
             width: auto;
             margin:0 180px;
             background-color: #0f0;
       }
       .colc2{
             width: 180px;
             left: 0;
             top: 0;
             position: absolute;
             background-color: #00f;
       }
       .cola3{
             width: 180px;
             background-color: #f00;
             position: absolute;
             left: 600px;
             top: 0;
       }
       .colb3{
             width: 600px;
             float: left;
             background-color: #0f0;
       }
       .colc3{
             float: right;
             width: 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>

css布局列表，自适应的更多相关文章

  1. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  2. css布局-内容自适应屏幕

    css页面布局,实现内容部分自适应屏幕,当内容高度小于浏览器窗口高度时,页脚在浏览器窗口底部:当内容高度高于浏览器窗口高度时,页脚自动被撑到页面底部. <style type="tex ...

  3. css布局宽度自适应

    随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...

  4. CSS布局--左侧自适应母元素高度

    平常项目中经常会遇到有左侧导航菜单的高度不固定,需要与母元素或右侧元素等高的情况,以前就自以为是的使用js来设置,不仅不方便还会出现各种bug,后来就突然想到了一个好方法.有可能这方法已经被其他人用烂 ...

  5. CSS 布局:40个教程、技巧、例子和最佳实践

    前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...

  6. 移动端 css/html (box-flex)自适应、等比布局

    移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...

  7. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  8. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  9. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

随机推荐

  1. thunkify 模块

    function thunkify(fn){ assert('function' == typeof fn, 'function required'); return function(){ var ...

  2. Python中的下划线（译文）

    原文地址这篇文章讨论Python中下划线_的使用.跟Python中很多用法类似,下划线_的不同用法绝大部分(不全是)都是一种惯例约定. 单个下划线(_) 主要有三种情况: 1. 解释器中 _符号是指交 ...

  3. [小菜随笔]新手使用appium+python进行自动化测试过程中webdriver.Remote报错的错误分析方法（带实例）

    很多人刚开始使用python+appium去执行APP自动化的时候经常会遇到webdriver.Remote,报错位置指向都是driver = webdriver.Remote('http://127 ...

  4. 在sqlserver中做fibonacci（斐波那契）规律运算

    --利用sqlserver来运算斐波那契规律 --利用事物与存储过程 declare @number intdeclare @A intdeclare @B intdeclare @C int set ...

  5. iOS推送生成服务器端p12文件

    生成服务器端推送p12文件 所需文件:A.开发证书  aps_production.cer B.本地导出的私钥   : aps_production.p12 C.生成证书时用到的请求文件:Push.c ...

  6. box-shadow

    box-shadow:a b c d e; a-水平位置,相对于盒子本身在水平方向的正偏移距离: b-垂直位置: c-模糊距离: d-阴影尺寸,从盒子的边框开始算起的阴影的宽度: e-阴影颜色: f- ...

  7. Spring中的自动装配

    src\dayday\Person.java package dayday;/** * Created by I am master on 2016/11/28. */public class Per ...

  8. 调用javaAPI访问hive

    jdbc远程连接hiveserver2 2016-04-26 15:59 本站整理 浏览(425)     在之前的学习和实践Hive中,使用的都是CLI或者hive –e的方式,该方式仅允许使用Hi ...

  9. CxImage图像库的使用 .

    http://blog.csdn.net/wangjie0377/article/details/7830405 CxImage图像库 CxImage下载地址:http://www.codeproje ...

  10. header、footer、hgroup、address

    header:整个页面或者一个块级区域的头部区域,通常用来放置标题等信息: footer:整个页面或者一个块级区域的底部区域,通常用来放置版权信息.联系方式等: hgroup:用来对属于一个块级区域的 ...