关于并列的三列布局结构，从左至右依次为 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. 字符设备驱动之Led驱动学习记录

    一.概述 Linux内核就是由各种驱动组成的,内核源码中大约有85%的各种渠道程序的代码.一般来说,编写Linux设备驱动大致流程如下: 1.查看原理图,数据手册,了解设备的操作方法. 2.在内核中找 ...

  2. 修改Oracle监听端口

    修改oracle监听端口 修改端口号的整体步骤:1.1   查看当前监听的状态1.2   停止监听1.3   修改监听文件的端口号1.4   修改初始化参数local_listener1.5   重启 ...

  3. Html标签第三课

    1.css div { position:absolute; } #d1 { height:100px; width:100px; border: solid 1px red; background- ...

  4. He faced a maximum sentence of three years.

    Police raided his home in August and found more than 100g of marijuana. He faced a maximum sentence ...

  5. auto_ptr源码剖析

    /* * Copyright (c) 1997-1999 * Silicon Graphics Computer Systems, Inc. * * Permission to use, copy, ...

  6. Go语言http包Form解析之坑

    最近正在用Go语言做一个项目,今天在用http包读取客户端发过来的POST数据时遇到了一点小麻烦,就下面这段代码,死活读不到数据: { var body []byte nRead, err := r. ...

  7. 如何用vs2010打开vs2013的项目？

    众所周知,用vs2013打开vs2010十分简单,无须做什么. 从VS2010开始,不再制作专有的文件格式,这只是一个xml格式的文本文件,其中决定了解决方案的平台工具集和VS版本. 既然.sln只是 ...

  8. USBD_STATUS

    USBD_STATUS   该USBD_STATUS数据类型为USB请求定义USB状态值.     的typedef LONG USBD_STATUS; USB状态值的最显著4位被如下表中所定义. 值 ...

  9. TOMCAT运行一段时间后网页无响应或连不上，TOMCAT无错误日志

    解决方法:修改 tomcat 的 java options 参数1)增加java options参数-Xmn384m-XX:MaxPermSize=128m-XX:+UseConcMarkSweepG ...

  10. winform中listview imagelist问题

    参考:http://www.it165.net/pro/html/201410/23603.html 关于imagelist失真问题: 1.颜色 将ColorDepth属性设置成Depth32Bit ...