CSS-品字布局

最新推荐文章于 2024-04-14 00:46:45 发布

z_Ever1

最新推荐文章于 2024-04-14 00:46:45 发布

阅读量603

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_Ever1/article/details/78353534

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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>