时间戳

首页 > 解决方案 > 老虎机的 CSS 流体布局问题

html - 老虎机的 CSS 流体布局问题

问题描述

所以我正在尝试创建一个简单的老虎机。首先，我在身体上有一个随机的背景图像，然后我有一个老虎机本身的 div。在老虎机的 div 内有一个包装 div，其中包含 3 个 div，每个 div 都有一个带有插槽编号的背景图像。图像有大约 2000 像素的高度和 Y 轴上的背景重复，以创造插槽无限旋转的印象。我用来隐藏溢出的包装器 div 但是当我试图使插槽流动时，我在将包装器 div 与老虎机本身的数字对齐时遇到了一些麻烦。希望你们明白我想要做什么。我将分享代码和两个屏幕截图。如果需要，我也可以上传图片。

asd asd

尝试使用包装器的宽度，但无法到达我想要的位置。

    <body>
      <div class="slot-machine">
        <div class="wrapper">
          <div class="slot-strip"></div>
          <div class="slot-strip"></div>
          <div class="slot-strip"></div>
        </div>
      </div>

    </body>

    * {
      margin:0;
      padding:0;
      border:0 none;
      box-sizing: border-box;
    }

    html,body {
      width:100%;
      height:100%;
    }

    body {
      background:url("bg.jpg");
      background-size: cover;
      padding:300px 0;
    }

    .slot-machine {
      background:url("slot-machine.png");
      background-repeat: no-repeat;
      background-position:center;
      margin:auto;
      width:1200px;
      height: 240px;
      overflow: hidden;
    }

    .wrapper {
      float:left;
      width:330px;
      height:120px;
      margin-left:440px;
      margin-top:75px;
      overflow: hidden;
      background:rgba(0,0,0,0.5);
    }

    .slot-strip {
      background:url("slot-strip.png");
      width:110px;
      height:2000px;
      background-size: contain;
      float:left;
      background-position: 0 110px;
    }

    @media only screen and (max-width: 1250px) {
      .slot-machine {
        width:98%;
        background-size: contain;
      }

     .wrapper {
     }

    }

老虎机和老虎机号码应该一起减小。

标签： htmlcss

解决方案

推荐阅读