关于并列的三列布局结构，从左至右依次为 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. 【 2013 Multi-University Training Contest 3 】

    HDU 4622 Reincarnation 枚举字符串的起点,构造后缀自动机,每次插入一个字符,就能统计得到当前不同字串的个数,预处理出所有的询问. #include<cstdio> # ...

  2. (转载)jQuery 1.6 源码学习（一）——core.js[1]之基本架构

    在网上下了一个jQuery 1.2.6的源码分析教程,看得似懂非懂,于是还是去github上下载源码,然后慢慢看源代码学习,首先来说说core.js这个核心文件吧. jQuery整体的基本架构说起来也 ...

  3. Emacs 常用快捷键

    关闭欢迎界面:Q 保存:c-x c-s 退出:c-x c-c 暂时退出:c-z       屏幕滚动 移动到下一屏:c-v 移动到上一屏:m-v 将光标所在行置中:c-L       光标移动 上一行 ...

  4. 【初级】linux rm 命令详解及使用方法实战

    rm:删除命令 前言: windows中的删除命令大家都不陌生,linux中的删除命令和windows中有一个共同特点,那就是危险,前两篇linux mkdir 命令详解及使用方法实战[初级]中我们就 ...

  5. Trie树-字典查找

    描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. 这一天,他们遇到了一本词典,于是小Hi就向小Ho提出了那个经典的问题: ...

  6. php 的txt操作，加入类容

    <?php $fr=fopen("./data/test.txt",'a'); //fopen(位置,打开方式) if(!$fr) { echo " error&q ...

  7. DB2获取有效工作时长函数（排除节假日、排除午休时间）

    CREATE OR REPLACE FUNCTION DIFFHOURTIME_WITHOUTHOLIDAY_FUN ( STARTTIME ), ENDTIME ) ) RETURNS DOUBLE ...

  8. wpf学习笔记

    1.菜单:普通菜单.上下文菜单(ContextMenu) <Menu HorizontalAlignment="Left" Height="20" Ver ...

  9. ionic的start-y属性初始化页面

    混合式开发移动app,要实现的是初始化页面时不展示搜索框,让页面向上移动一定位移. <ion-content class="has-subheader" start-y=&q ...

  10. 例子：Database - Linq to sql

    DataContext类型(数据上下文)是System.Data.Linq命名空间下的重要类型,用于把查询句法翻译成SQL语句,以及把数据从数据库返回给调用方和把实体的修改写入数据库. DataCon ...