怎么样才能做到自适应

来源:7-2 编程练习

刘一

2019-12-08 14:29:44

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

      margin: 0;

      padding:0;

    }

  

    .test{

     width: 15%;

     height: 100px;

     background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png);

background-size: 100% 100%;  

position: fixed;     /*此处写代码*/

left: 0;

top:200px;


     

   

   }

   .test1{

     width: 15%;

     height: 100px;

     background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png);

background-size: 100% 100%;  

position: fixed;     /*此处写代码*/

right: 0;

top:200px;


     

   

   }

   .out{

    width:100%;

    height: 2000px;

 background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png);

background-size: 100% 100%;

 

  }

</style>

</head>

<body>



  <div class="out">

 

    <div class="test">

  </div>

     <div class="test1">

  </div>

  </div>

</body>

</html>


写回答

1回答

好帮手慕小尤

2019-12-08

同学你好,使用固定定位,将左右块元素相对于窗口垂直居中,实现自适应。修改后代码如下:

http://img.mukewang.com/climg/5deca89a098900fd10560690.jpg

祝学习愉快!

0

0 学习 · 4928 问题

查看课程