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 }
  • 相关阅读:
    Mysql升级过程的问题
    关于SSM项目注解事务不回滚的问题
    Linux环境下tomcat如何热部署
    Windows系统下python3中安装pyMysql
    jvm性能监控及故障处理工具(《深入理解java虚拟机》)
    jvm垃圾回收器(《深入理解java虚拟机》)
    jvm-运行时数据区域(《深入理解java虚拟机》)
    java源码分析-String
    java源码分析-Object
    2019秋季PAT甲级题解(无第一题)
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/6306450.html
Copyright © 2011-2022 走看看