百度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. django ORM创建数据库方法

    1.指定连接pymysql(python3.x) 先配置_init_.py import pymysql pymysql.install_as_MySQLdb() 2.配置连接mysql文件信息 se ...

  2. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  3. delegate和event的区别 （zz)

    一. delegate C#代理实际上类似于C++中的函数指针,因为C#中不存在指针,所以用代理可以完成一些原来在C++中用函数指针完成的操作,例如传递一个类A的方法m给另一个类B的对象,使得类B的对 ...

  4. linux CentOS6.5 yum安装mysql 5.6（转载&删改）

    按:下面文章经过我一路测试没有问题,是篇好文,在此感谢作者 别踩我袈裟  .另因原文有些啰嗦,我自己有所删改,并尾后增加了一大段. 出处:https://www.cnblogs.com/renjido ...

  5. （剑指Offer）面试题54：表示数值的字符串

    题目: 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.14 ...

  6. （剑指Offer）面试题52：构建乘积数组

    题目: 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不能 ...

  7. 自己定义View步骤

     概述 Android已经为我们提供了大量的View供我们使用,可是可能有时候这些组件不能满足我们的需求,这时候就须要自己定义控件了.自己定义控件对于刚開始学习的人总是感觉是一种复杂的技术. 由于 ...

  8. Apache多站点配置教程

    看见这个版关于网络程序方面的文章还比较少,下面来一发~实践证明,本教程适用于Apache 2.2.22,其他版本相差应该不大 我的博客:http://wislab.net/,希望跟大家多多交流噢 Ap ...

  9. Geolocation 地理定位

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  10. android使用achartengine 实现折线图

    折线图的实现分为下边几个步骤: 1.第一步:数据的准备 XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset(); XYSeri ...