百度ife任务三，要求中间宽度自适应，高度取三列最高者。

开始用position的relative和absolute，但是relative不能自适应宽，absolute不能加float浮动，撑不起来外框。

折腾了三天，最后在一个网站看到，左left浮动，右right浮动，中间啥都不用，既不用position也不用float，只要把center写在right后面就可以了！

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="common.css">

 </head>

 <body>

     <div class="out">

         <div class="left">

             <img src="../images/photo.png" class="photo" alt="">

             <span>梵天莲华</span>

         </div>

         <div class="right">

             <img src="../images/photo.png" alt="">

             <img src="../images/photo.png" alt="">

             <img src="../images/photo.png" alt="">

         </div>

         <!-- center要放到下面，不用浮动，就可以自适应高度和宽度 -->

         <div class="center">

             <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

             <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

             <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

             <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

             <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

         </div>

     </div>

     <div>111111111111111122222222222222222222</div>

 </body>

 </html>

style.css

 body{

     margin: 0;

 }

 .clear{

     clear: both;

 }

 .out{

     /*width设置为100%，右边会顶到边，出现横滚动条*/

     /*width: 100%;*/

     border: 1px solid #00f;

     margin: 10px;

     padding: 20px;

     /*overflow可清除浮动*/

     overflow: hidden;

 }

 .left{

     background-color: #555;

     float: left;

     border: 1px solid #f00;

     width: 200px;

     /*设置display属性为内联表格，顶部对齐，但是不能靠右侧布局*/

     /*display: inline-table;

     vertical-align: top;*/

 }

 .center{

     background-color: #aaa;

     border: 1px solid #0f0;

     margin-left: 240px;

     margin-right: 160px;

     min-width: 500px;

 }

 .right{

     background-color: #eee;

     float: right;

     border: 1px solid #f00;

     width: 120px;

 }

 .photo{

     width: 80px;

     height: 80px;

     margin: 20px;

 }

 .left span{

     float: right;

     margin-top: 20px;

     margin-right: 10px;

 }

 .right img{

     width: 80px;

     height: 80px;

     /*将图片设置为block块级元素，不然默认边距*/

     display: block;

     margin: 20px 20px 20px 20px;

 }

CSS学习笔记（6）--浮动，三列布局，高度宽度自适应的更多相关文章

  1. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  2. html+css学习笔记 3[浮动]

    inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie ...

  3. CSS学习笔记：浮动属性

    目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...

  4. CSS学习笔记（12）--Flex 布局教程：实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  5. CSS学习笔记（11）--Flex 布局教程：语法篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...

  6. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  7. CSS学习笔记10 相对定位，绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  8. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  9. 三列布局，读《css那些事儿》

    1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...

  10. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

随机推荐

  1. go语言基础之流程控制 if语句

    Go语言支持最基本的三种程序运行结构:顺序结构.选择结构.循环结构. 顺序结构:程序按顺序执行,不发生跳转. 选择结构:依据是否满足条件,有选择的执行相应功能. 循环结构:依据条件是否满足,循环多次执 ...

  2. Dockerfile命令

    Dockerfile分基础镜像信息.维护者信息.镜像操作指令.容器启动时执行指令 FROM 镜像名:标签 第一条指令必须时FROM MAINTAINER 维护者信息 RUN command或者RUN ...

  3. 84. Largest Rectangle in Histogram-hard

    84. Largest Rectangle in Histogram 题目 Given n non-negative integers representing the histogram's bar ...

  4. ES6 中的 Set

    收录待用,修改转载已取得腾讯云授权 作者:kurtshen ES6 新增了几种集合类型,本文主要介绍Set以及其使用. 其基本描述为 Set对象是值的集合,你可以按照插入的顺序迭代它的元素. Set中 ...

  5. （转） [Flash/Flex] 用柏林噪音和滤镜制作翻腾的火焰效果----Flash AS3效应

    下图展示的是通过柏林噪声和一些滤镜制作的火焰效果.这个效果是从舞台底部燃起的熊熊烈火.这个效果使用了BitmapData里的perlinNoise方法,以及ColorMatrixFilter和Disp ...

  6. Verilog 基础回顾 (一)

    Verilog 大小写敏感,且所有关键字都是小写 1  寄存器 register = storage,是数据存储单元的抽象,可视为能够存储数值的变量 (variable that can hold v ...

  7. 时间记录APP———Time Meter

    关注过时间管理的人可能都听过大名鼎鼎的柳比歇夫的时间记录法,在几年前,大多人都推荐纸笔的记录方法,但是纸笔总是会忘,越来越智能的手机可是总不会忘得,所以我始终在寻找一款手机端好用的APP. 不管是时间 ...

  8. angularjs中ng-repeat的使用

    第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-de ...

  9. Python 3 - 基本类属性和方法

    attributes.py class Point: pass p1 = Point() p2 = Point() p1.x = 5 p1.y = 4 p2.x = 3 p2.y = 6 print( ...

  10. HTTP请求头 If-Modified-Since

    来自:http://www.jm47.com/g/91174.htm 一直以来没有留意过HTTP请求头的IMS(If-Modified-Since)标签. 最近在分析Squid的access.log日 ...