如何在可滚动 div 中使我的图像 DIV 更大？

Question

我有一个水平滚动条 div，我已将其平方 divs。我需要使这些平方 divs 更大，但我无法实现。在我在这里提供的示例中，有 3 个平方 divs。每次我添加一个新的，它们都会变得更小。我怎样才能防止它们缩小并保持我的可滚动 div?

Here's my codepen.

Answer 1

为您的盒子设置一个最小宽度，并确保您的容器不会缠绕。

修改后的代码位于 CSS 片段的底部

.publish-product-form {
    margin-bottom: 15px;
}

.image-scroller {
    border: 1px solid blue;
    width: 375px;
    height: auto;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: white;
    padding: 0px;
    -webkit-overflow-scrolling: touch;
}

.img-box {
    padding: 0px;
}

.img-holder {
    margin-top: 20px;
}

.image-doesnt-exist {
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    border: 2px dotted #8ABE57;
    border-radius: 0.25rem;
}


.add-img-button::before {
    font-size: 1.2em;
}

.add-img-button {
    color: #8ABE57;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.2em;
    transform: translate(-50%, -50%);
}

.add-img-button:hover {
    color: #9FD362;
}

/**New css**/
.image-scroller .row { 
   flex-wrap: nowrap;
}

.image-scroller .img-box {
  min-width: 180px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>

<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content publish-product-modal-content">
            <div class="modal-header publish-product-modal-header">
                <img src="images/logo-header.svg">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">

                <!-- Image Edition Section -->
                <div class="publish-product-form col-12">
                    <form class="edit-ad-product-information">

                        <!--- MY IMAGE SCROLL TEST -->
                        <div class="row">
                            <div class="image-scroller col-12">

                                <div class="row">
                                    <div class="img-box col">
                                        <div class="col-12 img-holder">
                                            <a href="#">
                                                <i class="fas fa-camera add-img-button"></i>
                                                <div class="image-doesnt-exist"></div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="img-box col">
                                        <div class="col-12 img-holder">
                                            <a href="#">
                                                <i class="fas fa-camera add-img-button"></i>
                                                <div class="image-doesnt-exist"></div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="img-box col">
                                        <div class="col-12 img-holder">
                                            <a href="#">
                                                <i class="fas fa-camera add-img-button"></i>
                                                <div class="image-doesnt-exist"></div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="img-box col">
                                        <div class="col-12 img-holder">
                                            <a href="#">
                                                <i class="fas fa-camera add-img-button"></i>
                                                <div class="image-doesnt-exist"></div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="img-box col">
                                        <div class="col-12 img-holder">
                                            <a href="#">
                                                <i class="fas fa-camera add-img-button"></i>
                                                <div class="image-doesnt-exist"></div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="img-box col">
                                        <div class="col-12 img-holder">
                                            <a href="#">
                                                <i class="fas fa-camera add-img-button"></i>
                                                <div class="image-doesnt-exist"></div>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- /MY IMAGE SCROLL TEST-->
                    </form>
                </div>

            </div>

        </div>
    </div>
</div>
</div>
<!-- /Modal Editar Aviso-->

Answer 2

从 div.img-box 中删除 col class，您还需要将 .row class' display 属性从 flex

更改为 block

.row {
  display: block;
  white-space: nowrap
}

.img-box {
  height: 125px;
  width: 125px;
  display: inline-block;
}

如何在可滚动 div 中使我的图像 DIV 更大？

How can I make my image DIVs bigger in a scrollable div?

html

css

responsive-design

bootstrap-4