百度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. 服务 进程守护 MarsDaemon 简介

    MarsDaemon 基本功能 https://github.com/Marswin/MarsDaemon It is a lite library, you can make your projec ...

  2. 零基础学python-3.5 内存管理

    * 变量无需事先声明 * 变量无需指定类型 * 程序猿不用关系内存管理 * 变量名会被回收 * del能够直接释放资源 1.python使用的是引用调用,而不是值调用,他使用的回收算法是引用计数算法, ...

  3. hihoCoder 1261 String Problem II

    时间限制:50000ms 单点时限:5000ms 内存限制:512MB 描写叙述 我们有一个字符串集合S,当中有N个两两不同的字符串.还有M个询问,每一个询问都会先给出一个字符串w,你须要回答下面三个 ...

  4. angular中$location读取url信息

    读取url信息: <html ng-app="myApp"> <head> <title>angularjs-demo</title> ...

  5. 总结一些Android好用的开源库

    1.android-viewFlow https://github.com/pakerfeldt/android-viewflow 2. android-viewbadger https://gith ...

  6. Jquery重新学习之六[操作XML数据]

    上一章整理有关Jquery操作JSON格式数据,本章则是整理Jquery与XML的交互,因为XML简单易用及运用在很跨平台上的优点,所以项目运用Jquery操作XML还是比较常见:下面的代码来自Jqu ...

  7. JavaScript操作符

    一元操作符 只能操作一个值的操作符叫做一元操作符. 递增和递减操作符 递增和递减操作符遵循下列规则:         在应用于一个包含有效数字字符的字符串时,先将其转换为数字值,再执行加减 1 的操作 ...

  8. [转发]在Visual Studio 2010/2012/2013/2015上使用C#开发Android/IOS安装包和操作步骤

    官方学习文档:http://developer.xamarin.com/guides/android/getting_started/ 官方学习例子:http://developer.xamarin. ...

  9. jsp标签（jsp动作元素）

    <jsp:forward page=”/index.jsp”></jsp:forward>也是跳转. 可以用来配置为首页,来启动某个servlet. <jsp:inclu ...

  10. JSP 九大隐式对象

    final javax.servlet.jsp.PageContext pageContext; javax.servlet.http.HttpSession session = null; fina ...