更新

Question

Hy Guys，我在这里请你帮忙，因为我可以为移动设备做一个水平幻灯片。

这是我的css代码：

#offers {
        background-color: #ebeff2;
        padding-bottom:20px;
    }
    .slideshow {
        z-index: 1000;
        max-width: 370px;
    }
    .slideshow ul {
        margin:0px;
        padding:0px;
        list-style: none;

        width: 2000px;
        overflow-x: visible;
        z-index: 5;
    }
    .slideshow ul li {
        padding:10px;
        background-color:#fff;
        position: relative;
        text-align: center;

        float:left;
    }
    .slideshow ul li img.background{
        width: 326px;
        height: 244px;
    }

    .slideshow ul li .name {
        position: absolute;
        top:40px;
        background-color: #fff;
        width: 95%;
    }

    .slideshow ul li .name img {
        height: 62px;
    }

    .slideshow ul li .price {
        border-radius: 100%;
        background-color: #fff;
        height: 80px;
        width: 80px;
        position: absolute;
        bottom: 60px;
        left: 38%;
        font-weight: 900;
        font-size: 25px;
        line-height: 80px;
        color: #ff6d06;
    }

这里是html代码：

<div class="row" id="offers">
        <div class="col-md-12">
            <h2>Alcune Offerte Attive</h2>
        </div>
        <div class="col-md-12">
           <div class="slideshow">
               <ul>
                   <li>
                       <div class="">
                           <img src="./images/img.jpg" class="img-fluid background">
                           <div class="name">
                               <img src="./images/logo.png" class="img-fluid">
                           </div>
                           <div class="price">
                                10 &euro;
                           </div>
                       </div>
                   </li>
                   <li>
                       <div class="">
                           <img src="./images/img.jpg" class="img-fluid background">
                           <div class="name">
                               <img src="./images/logo.png" class="img-fluid">
                           </div>
                           <div class="price">
                               10 &euro;
                           </div>
                       </div>
                   </li>
                   <li>
                       <div class="">
                           <img src="./images/img.jpg" class="img-fluid background">
                           <div class="name">
                               <img src="./images/logo.png" class="img-fluid">
                           </div>
                           <div class="price">
                               10 &euro;
                           </div>
                       </div>
                   </li>
               </ul>
           </div>
        </div>
    </div>

所以，实际上结果非常简单：

但我希望有一个＆＃34;固定宽度滑动＆＃34;作为我可以流口水的移动屏幕。实际上小盒子比移动屏幕尺寸大，我已经尝试添加固定与幻灯片类，我已经添加了overflow-x滚动但似乎不起作用，我不知道为什么。

先谢谢你的帮助。

更新

我的请求很混乱，所以在此链接中，您可以看到我正在寻找的内容：link

Answer 1

嗯，首先，你的问题很混乱，你听说过简单的css媒体查询吗？让我告诉你，我将从你的代码和所有外部样式规则中删除，内联样式不是那么明智，但我也会告诉你，如何使用css媒体查询。您想要实现图像高度控制。 CODE

        <div class="slideshow">
           <ul>
               <li>
                   <div class="mobile1">
                       <img src="./images/img.jpg" class="img-fluid background  simple">
                       <div class="name">
                           <img src="./images/logo.png" class="img-fluid">
                       </div>
                       <div class="price">
                            10 &euro;
                       </div>
                   </div>
               </li>
               <li>
                   <div class="mobile2">
                       <img src="./images/img.jpg" class="img-fluid background simple">
                       <div class="name">
                           <img src="./images/logo.png" class="img-fluid">
                       </div>
                       <div class="price">
                           10 &euro;
                       </div>
                   </div>
               </li>
               <li>
                   <div class="mobile3">
                       <img src="./images/img.jpg" class="img-fluid background simple">
                       <div class="name">
                           <img src="./images/logo.png" class="img-fluid">
                       </div>
                       <div class="price">
                      10 &euro;
                       </div>
                   </div>
               </li>
           </ul>
       </div>

如果不起作用，请引起我的注意。

       <style> 
     @media screen and (max-width: 820px) {  //MEDIA QUERIES, RESEARCH MORE ON THEM. WHAT I AM SAYING HERE IS, IF SCREEN IS LESS THAN 820px a desktop size apply that media screen css.
       .mobile1{
      height:300px; //adjust this to your taste
      width:100%; //to make image fill screen horizontally
      }

     .mobile2{
       height:300px; //adjust this to your taste
      width:100%; //to make image fill screen horizontally
      }


      .mobile3{
       height:300px; //adjust this to your taste
      width:100%; //to make image fill screen horizontally
      }


      .simple{
      height:100%;
      width:100%;
      }
      }
      </style>

水平幻灯片

更新

1 个答案: