关于并列的三列布局结构，从左至右依次为 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. 【Python⑥】python的缩进，条件判断和循环

    缩进 Python的最大特色是用缩进来标明成块的代码. 这点和其他语言区别很明显,比如大家熟悉的C语言里: ) { num+=; flag-=; } 而在python中: if flag>= 0 ...

  2. Java中使用二重循环打印沙漏图形

    1.首先判断外层,A .B.C.D都符合条件 2.那么再看内层 A :int i=0;i<5;i++ 当i=1时;带入到第二个内层循环中 int j=0;j<Math.abs(i)*2+1 ...

  3. SpringMVC 数据转换 & 数据格式化 & 数据校验

    数据绑定流程 1. Spring MVC 主框架将 ServletRequest 对象及目标方法的入参实例传递给 WebDataBinderFactory 实例,以创建 DataBinder 实例对象 ...

  4. Ionic的跨域问题

    跨域大家都不陌生,但最近一直遇到一个坑,也是自身对ajax和angular的不深入造成,所以记录一笔,下次遇到绕过. 参考过:http://ionichina.com/topic/54f051698c ...

  5. JSOI2016R3 瞎BB题解

    题意请看absi大爷的blog http://absi2011.is-programmer.com/posts/200920.html http://absi2011.is-programmer.co ...

  6. Spring(1)

    一.Spring是什么? .Spring是一个开源的框架 .是一个IOC(DI)和AOP容器的框架 .这个框架是为了简化企业级应用开发而生的,使用Spring可以使简单的JavaBean实现以前只有E ...

  7. DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.2.0.7_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

  8. 【转】Java反射 之 反射基础

    一.反射 反射:Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为 ...

  9. c#第三方控件地址

    原文:http://blog.csdn.net/wpcxyking/article/details/6249825 首先感谢博文原者,分享这么有价值的内容,特此感谢. DevExpress 出品 Dx ...

  10. HighChats图表控件显示精度小数点的方法

    相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{    fo ...