响应式布局移动到下方

最新推荐文章于 2022-07-26 19:18:13 发布

你的孤独虽败犹荣

最新推荐文章于 2022-07-26 19:18:13 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/zhou742626/article/details/78672326

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>响应式布局</title>
       <style>
           .inner{
               width: 1200px;
               margin: 0 auto;
           }
           .left{
               width: 50%;
               height: 400px;
               background: red;
               float: left;
           }
           .right{
               width: 50%;
               height: 400px;
               background: blue;
               float: right;
           }
           @media screen and (max-width:1200px){
               .inner{
                   width: 100%;
               }
           }
           @media screen and (max-width: 980px) {
               .left{
                   width: 100%;
                   float: none;
               }
               .right{
                   width: 100%;
                   float: none;
               }
           }

       </style>
   </head>
   <body>
       <div class="inner">
           <div class="left"></div>
           <div class="right"><p>作者简介</p></div>

       </div>
   </body>
</html>