模式图像库缩略图部分中的水平滚动现在可以正常工作

Question

我正在使用模态框显示一些图像，下面有标题和缩略图部分。

我面临的问题是缩略图部分只适用于 6 张或少于 6 张图像，如果有更多图像，我必须减小缩略图的大小。现在我有 10 个。

我想要做的是有一个水平滚动的缩略图部分。它可以解决我所有的问题。我在网上试过了，但我好像做不到。

我的部分代码：

 <div class="row1">
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-sudo-0.png" style="width:100%" onclick="currentSlide(1)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-sudo-1.png" style="width:100%" onclick="currentSlide(2)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-0.png" style="width:100%" onclick="currentSlide(3)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-1.png" style="width:100%" onclick="currentSlide(4)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-2.png" style="width:100%" onclick="currentSlide(5)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-3.png" style="width:100%" onclick="currentSlide(6)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-4.png" style="width:100%" onclick="currentSlide(7)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-5.png" style="width:100%" onclick="currentSlide(8)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-bike-0.png" style="width:100%" onclick="currentSlide(9)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-bike-1.png" style="width:100%" onclick="currentSlide(10)">
 </div>

我在网上找到的解决方案是将此添加到我的 CSS:

.row1 {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.column {
    display: inline-block;
    width: 16.66%;
}

这行不通，但它确实在做一些事情。当我使用 inspect elements 时，它告诉我该列在那里，但我就是看不到它。我附上了下面的截图。

以防万一，我附上了我的整个模态代码：

 <div id="myModal" class="modal" onkeypress="closeModal()">

 <!-- Modal content -->
 <span class="close cursor" onclick="closeModal()">&times;</span>
 <div class="modal-content">

     <div class="mySlides">
         <div class="numbertext">1 / 10</div>
         <img src="assets/images/achievements/achi-sudo-0.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">2 / 10</div>
         <img src="assets/images/achievements/achi-sudo-1.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">3 / 10</div>
         <img src="assets/images/achievements/achi-yoga-0.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">4 / 10</div>
         <img src="assets/images/achievements/achi-yoga-1.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">5 / 10</div>
         <img src="assets/images/achievements/achi-yoga-2.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">6 / 10</div>
         <img src="assets/images/achievements/achi-yoga-3.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">7 / 10</div>
         <img src="assets/images/achievements/achi-yoga-4.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">8 / 10</div>
         <img src="assets/images/achievements/achi-yoga-5.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">9 / 10</div>
         <img src="assets/images/achievements/achi-bike-0.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">10 / 10</div>
         <img src="assets/images/achievements/achi-bike-1.png" style="width:100%" alt="Achievements">
     </div>

     <!-- Next and previous buttons -->
     <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
     <a class="next" onclick="plusSlides(1)">&#10095;</a>

     <!-- Image text -->
     <div class="caption-container">
         <p id="caption"></p>
     </div>

     <!-- Thumbnail images -->
     <div class="row1">
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-sudo-0.png" style="width:100%" onclick="currentSlide(1)" alt="Test">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-sudo-1.png" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-0.png" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-1.png" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-2.png" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-3.png" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-4.png" style="width:100%" onclick="currentSlide(7)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-5.png" style="width:100%" onclick="currentSlide(8)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-bike-0.png" style="width:100%" onclick="currentSlide(9)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-bike-1.png" style="width:100%" onclick="currentSlide(10)" alt="Snowy Mountains">
         </div>
     </div>

 </div>

整个模态 CSS:

  /* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.8);
}

/* Modal Content */
.modal-content {
    margin: auto;
    display: block;
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 70px;
}

/* The Close Button */
.close {
    color: white !important;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 30px !important;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #999 !important;
    text-decoration: none;
    cursor: pointer;
}


mySlides {
    display: none;
}

.cursor {
    cursor: pointer;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    /*    padding-right: 25px;*/
    margin-top: -30px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 10px 10px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 10px 0 0 10px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Container for image text */
.caption-container {
    text-align: center;
    background-color: #f2f2f2;
    padding: 2px 16px;
    color: #333;
}

.row1 {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.column {
    display: inline-block;
    width: 16.66%;
}

感谢您的帮助！

Answer 1

我明白了。问题出在容器元素上。 “最大高度”属性造成了问题。我刚刚更改了这个：

.modal-content {
    margin: auto;
    display: block;
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: max-content;  //THIS
}

模式图像库缩略图部分中的水平滚动现在可以正常工作

Horizontal Scrolling in Modal Image gallery thumbnail section is now working

html

css

modal-dialog

horizontal-scrolling