zoukankan      html  css  js  c++  java
  • 宫格布局

    原理: 每个li的宽度是100px;其右、下的margin都是20px,每个li都是左浮动的;ul的宽度是360px;ul的宽度是360px;让ul的父divoverflow:hidden;即可。

    <!doctype html>
    <html>
    <head>
    <meta />
    <title>Title</title>
    <style type="text/css">
    * { margin: 0; padding: 0; list-style: none; }
    .wrap { padding: 5px; margin: 0 0 -20px 0; 340px; overflow: hidden; background: #f00; }
    .wrap ul { 360px; clear: both;}
    .wrap ul li { margin: 0 20px 20px 0; 100px; height: 60px; float: left; background: #00f; }


    </style>
    </head>

    <body>
    <div class="wrap">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    053467
    053466
    053465
    NC201613 Jelly
    NC14608 after与迷宫
    NC14572 走出迷宫
    340. 通信线路
    1135. 新年好
    903. 昂贵的聘礼
    P5767 [NOI1997]最优乘车
  • 原文地址:https://www.cnblogs.com/darkterror/p/5212638.html
Copyright © 2011-2022 走看看