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 }
  • 相关阅读:
    配置svn
    驱动开发问题error 2019: __ftol2_sse 找不到的错误哦
    ollydbg,ring3级别的调试软件
    IoAttachDevice源码
    新手搭建 eclipse+winDDK驱动开发平台
    IoCallDriver源码剖析
    com.mysql.jdbc.exceptions.jdbc4.CommunicationsException
    error LNK2019: 无法解析的外部符号 "int __cdecl wsprintf
    (转)3ds Max 和 Away3D工作流程
    页游客户端热更新时获取的是旧资源的处理办法
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/6306450.html
Copyright © 2011-2022 走看看