百度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. OkHttp 使用案例 文档翻译 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  2. hadoop源代码组织结构与阅读技巧

    本文将介绍在 Eclipse 下阅读 Hadoop 源代码的一些技巧, 比如如何查看一个基类有哪些派生类. 一个方法被其他哪些方法调用等. 本文地址:http://www.cnblogs.com/ar ...

  3. java学习笔记1--开发环境平台总结

    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note1.html,转载请注明源地址. 1.Java程序设计语言 Java程序设计语言是一种高 ...

  4. 【3】利用Word模板生成文档的总结

    阅读目录 Word二次开发概况 使用DsoFramer进行开发 使用Interop进行开发 打开.关闭和写入操作 批量替换文本 遍历段落替换文本 查找后逐个替换文本 结论 在各类应用系统开发中,和Wo ...

  5. （剑指Offer）面试题41：和为s的两个数字

    题目: 输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s,如果有多对数字的和等于s,输出任意一对即可. 思路: 1.枚举 固定一个数字,然后依次判断数组中该数字后面的数字与 ...

  6. java创建二叉树并递归遍历二叉树

    二叉树类代码: package binarytree; import linkqueue.LinkQueue; public class BinaryTree { class Node { publi ...

  7. android的开发 华为手机上不显示menu键

    android的开发,华为手机上不显示menu键解决办法: 在AndroidManifest.xml中讲targetSdkVersion改为9. <uses-sdk android:minSdk ...

  8. 使用Eclipse构建Maven项目 (step-by-step) （转收藏）

    Maven这个个项目管理和构建自动化工具,越来越多的开发人员使用它来管理项目中的jar包.本文仅对Eclipse中如何安装.配置和使用Maven进行了介绍.完全step by step. 如果觉得本文 ...

  9. Inno Setup Pascal Script to search for running process

    I am currently trying to do a validation at the uninstall moment. In a Pascal script function, in In ...

  10. SuperMap iManager跨网段配置许可

    作者:非法小恋 1.开启Docker容器1947映射 修改docker-compose.yml,在iManager的ports添加- "1947:1947" 2.重启iManage ...