• CSS浮动 及父容器自适应高度


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body
    {
    margin
    :0 auto;
    font-size
    :12px;
    font-family
    :Verdana;
    line-height
    :1.5;
    }

    ul
    {
    padding
    :0;
    margin
    :0;
    list-style
    :none;
    }

    a
    {
    color
    :#05a;
    display
    :block;
    text-decoration
    :none;<!--去掉超链接a下划线-->
    }

    a:hover
    {
    color
    :#f00;
    }

    #layout ul li
    {
    width
    :72px;
    float
    :left;
    margin
    :20px 0 0px 20px;
    display
    :inline;
    text-align
    :center;
    }

    #layout
    {
    width
    :400px;
    border
    :2px solid #ccc;
    padding
    :2px;
    overflow
    :auto;
    zoom
    :1;
    }

    #layout ul li a img
    {
    padding
    :1px;
    border
    :1px solid #e1e1e1;
    margin-bottom
    :3px;
    width
    :68px;
    height
    :54px;
    }

    #layout ul li a:hover img
    {
    padding
    :0px;
    border
    :2px solid #f98510;
    }
    </style>
    </head>
    <body>
    <div id="layout">
    <ul>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    </ul>
    </div>
    </body>
    </html>
    <!--如果在前后Div上没有浮动的则该浮动div在这一行在浮动指定的方向(本行最左边,最右边)安放,如果前后有浮动的,则按先后浮动的顺序安放,行内有空格的话换到下一行,如没指定边距,则下一行从头开始
    如果一行里全是浮动,没有能占一行的,则下面的div始终能补充上来,除非空间不够,移到下一行
    -->

      

  • 相关阅读:
    shell while-ssh
    webpack 4x版本 安装后提示错误
    vuejs跨域请求解决方法
    前端开发工程师常用的网站
    微信小程序手机号快速填写及会员卡开卡组件开放
    div css左边固定右边自适应布局
    Javascript面向对象篇
    web 前端篇:web前端到底是什么?有前途吗 ?
    js页面滚动时层智能浮动定位实现:
    谈一谈jquery中的事件处理
  • 原文地址:https://www.cnblogs.com/dreamhome/p/2115605.html
Copyright © 2020-2023  润新知