关于并列的三列布局结构，从左至右依次为 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. SQL基础&笔试题

    仅以此篇博客纪念让我羞愧的一次笔试,作为对数据库基础的恶补. 一.SQL的基本概念: SQL是集数据定义语言DDL,数据操纵语言DML,数据控制语言DCL的功能于一体,可以独立完成数据库生命周期的全部 ...

  2. 取得交换机的MAC地址

    一.首先PING交换机的IP地址 二.然后执行 ARP -a 命令 如下图:

  3. Tomcat批处理文件小结

    Tomcat批处理文件小结 一:嗯,如果你不了解Windows批处理文件,并且想了解一下,请先参看下面的链接资源(我也是因为想了解一下Windows批处理文件是用什么写的?怎么写的?才在园中找的,下面 ...

  4. Shell脚本8种字符串截取方法总结

    Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.aaa.com/123.htm. 1. # 号截取,删除左边字符,保留右边字符. 代码如下: echo ${va ...

  5. CSS 透明度 设置 兼容IE FF

    filter:Alpha(Opacity=80);/*IE*/ -moz-opacity:0.8;/*FF*/ opacity: 0.8;/*所有元素*/ 参数设置说明: Alpha(Opacity= ...

  6. 关于启动ubuntu中的nfs启动问题

    嵌入式开发,如果使用nfs挂载来启动内核和文件系统,这样便于调试文件系统和驱动,则首先要保证ubuntu开启nfs服务, 执行以下命令安装nfs服务,安装后自动运行 sudo apt-get inst ...

  7. if 判断中出现逗号

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. kendo-ui学习笔记——题记

    1.Kendo UI基于最新技术HTML5.CSS3和JavaScript标准设计开发.2.官方网址:http://www.kendoui.com/3.API网上查阅英文版网址:http://docs ...

  9. 【python】面向对象

    面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 类class   实例(i ...

  10. sis9280触摸ic 基于rk3288 的安卓4.4的 多点触摸

    前言:sis提供的驱动ic.基于rk3288的安卓系统.亲眼看到人家完成一次移植.很激动的记下一些东西..虽然我看不懂.其实现在的工作也不需要看懂.叫人协助就好,只需要知道有这个东西. 1linux下 ...