CSS-品字布局

来源：互联网发布：嘉兴行知小学入学条件编辑：程序博客网时间：2024/05/16 08:36

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>品字布局</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       .small{
           width: 100px;
           height: 100px;
           background-color: pink;
       }
       .small p{
           line-height: 100px;
           text-align: center;
       }
       .one{
           /*该元素左右居中*/
           margin: 0 auto;
           /*设置内部子左右居中*/
           /*text-align: center;*/
       }
       .big{
           overflow: hidden;
           /*border: 1px solid red;*/
           width: 240px;
           margin: 0 auto;
       }
       .big .small{
           float: left;
           margin: 10px;
       }
   </style>
</head>
<body>
   <div class="small one">
       <p>1</p>
   </div>
   <div class="big">
       <div class="small">
           <p>2</p>
       </div>
       <div class="small">
           <p>3</p>
       </div>
   </div>
</body>
</html>

阅读全文

0 0