zoukankan      html  css  js  c++  java
  • CSS学习笔记(6)--浮动,三列布局,高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者。

    开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外框。

    折腾了三天,最后在一个网站看到,左left浮动,右right浮动,中间啥都不用,既不用position也不用float,只要把center写在right后面就可以了!

     index.html

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <link rel="stylesheet" href="common.css">
     7 </head>
     8 <body>
     9     <div class="out">
    10         <div class="left">
    11             <img src="../images/photo.png" class="photo" alt="">
    12             <span>梵天莲华</span>
    13         </div>
    14         <div class="right">
    15             <img src="../images/photo.png" alt="">
    16             <img src="../images/photo.png" alt="">
    17             <img src="../images/photo.png" alt="">
    18         </div>
    19         <!-- center要放到下面,不用浮动,就可以自适应高度和宽度 -->
    20         <div class="center">
    21             <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>
    22             <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>
    23             <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>
    24             <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>
    25             <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>
    26         </div>
    27     </div>
    28     <div>111111111111111122222222222222222222</div>
    29 </body>
    30 </html>

     style.css

     1 body{
     2     margin: 0;
     3 }
     4 .clear{
     5     clear: both;
     6 }
     7 .out{
     8     /*width设置为100%,右边会顶到边,出现横滚动条*/
     9     /* 100%;*/
    10     border: 1px solid #00f;
    11     margin: 10px;
    12     padding: 20px;
    13     /*overflow可清除浮动*/
    14     overflow: hidden;
    15 }
    16 .left{
    17     background-color: #555;
    18     float: left;
    19     border: 1px solid #f00;
    20      200px;
    21     /*设置display属性为内联表格,顶部对齐,但是不能靠右侧布局*/
    22     /*display: inline-table;
    23     vertical-align: top;*/
    24 }
    25 .center{
    26     background-color: #aaa;
    27     border: 1px solid #0f0;
    28     margin-left: 240px;
    29     margin-right: 160px;
    30     min- 500px;
    31 }
    32 .right{
    33     background-color: #eee;
    34     float: right;
    35     border: 1px solid #f00;
    36      120px;
    37 }
    38 
    39 
    40 .photo{
    41      80px;
    42     height: 80px;
    43     margin: 20px;
    44 }
    45 .left span{
    46     float: right;
    47     margin-top: 20px;
    48     margin-right: 10px;
    49 }
    50 
    51 .right img{
    52      80px;
    53     height: 80px;
    54     /*将图片设置为block块级元素,不然默认边距*/
    55     display: block;
    56     margin: 20px 20px 20px 20px;
    57 }
  • 相关阅读:
    Android 多线程 打地鼠游戏
    Android 线程那些事儿
    Android 服务入门
    Android+Handler+Thread 那些事儿
    Android 数据库的线程合作
    Android 数据库中的数据给到ListView
    git 修改管理
    import com.sun.image.codec.jpeg.JPEGCodec不通过 找不到包(转载)
    VC++中开发汇编语言(转)
    C struct结构体内存对齐问题
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/6306450.html
Copyright © 2011-2022 走看看