百度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. [C++基础]那些容易被混淆的概念：函数/数组指针-指针函数/数组，类/函数模板-模板类/函数

    函数指针-指针函数 函数指针的重点是指针.表示的是一个指针,它指向的是一个函数.eg: int (*pf)(); 指针函数的重点是函数.表示的是一个函数,它的返回值是指针.eg: int* fun() ...

  2. 在低带宽或不可靠的网络环境中安装 Visual Studio 2017

    在低带宽或不可靠的网络环境中安装 Visual Studio 2017 2017-4-141 分钟阅读时长 作者  https://docs.microsoft.com/zh-cn/visualstu ...

  3. 创建sdcard.img时，提示permission dennid

    解决方法: mksdcard -l sdcard 100M E:\sdcard\sdcard.img 换一个盘试试,比如:mksdcard -l sdcard 100M F:\sdcard\sdcar ...

  4. UVALive 4857 Halloween Costumes

    区间dp.对于最左边的点: 1.在该点穿的衣服只有该点用的到,即穿上就脱下.所以dp[ l ][ r ] = min(dp[ l + 1][ r ] + 1, dp[ l ][ r ]). 2.衣服仍 ...

  5. es6 - 回调深渊

    带着以下疑问来解答以下问题,你会学到很多 1. 回调深渊为什么会出现,为什么需要回调 ? 2. ES6为什么会出现Promise? 3. 回调的作用是什么? 跟闭包有关吗? ES5 ~ ES6 回调深 ...

  6. Linux系统登录：本地登录与远程登录

    安装登录系统的位置可以将登录方式分为两种:本地登录和远程登录.本地登录可以使用图形界面和命令行模式(也称字符界面)两种方式:远程登录可以使用SSH.Telnent.VNC.SFTP 4种方式. 常见的 ...

  7. 彻底告别加解密模块代码拷贝-JCE核心Cpiher详解

    前提 javax.crypto.Cipher,翻译为密码,其实叫做密码器更加合适.Cipher是JCA(Java Cryptographic Extension,Java加密扩展)的核心,提供基于多种 ...

  8. 深度介绍Linux内核是如何工作的

    本文发表于Linux Format magazine杂志,作者从技术深度上解释了Linux Kernel是如何工作的.相信对Linux开发者来说有不小的帮助. 牛津字典中对"kernel&q ...

  9. Unity3D游戏开发之SQLite让数据库开发更简单

    各位朋友大家好.欢迎大家关注我的博客,我是秦元培,我是博客地址是http://blog.csdn.net/qinyuanpei.在经历了一段时间的忙碌后,博主最终有时间来研究新的东西啦,今天博客向和大 ...

  10. 【微信开发】JS和PHP分别判断当前浏览器是否微信浏览器

    1.PHP端 //判断是否微信浏览器 -xzz1125 function is_weixin() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMes ...