CSS学习笔记（6）--浮动，三列布局，高度宽度自适应

百度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;
 }