如何使溢出容器可拖动

Question

我在尝试使在 Divi 中创建的溢出容器可拖动时遇到一些问题。

经过研究，我发现了一些与我要查找的内容相关的模板。但是，由于必须在主题中创建容器的方式，因此无法正常工作。

我在下面添加了一个指向网站开发的链接，这样您就可以看到容器的设置方式。任何关于如何实现我想要的结果的建议将不胜感激。

我正在努力实现的示例

https://codepen.io/toddwebdev/pen/yExKoj

开发网站

https://snapstaging.co.uk/thesnapagency/about/

容器布局

<div class="section">
    <div class="row">
        <div class="column">
            <div class="module">
                <div class="container">
                    <div class="items">
                        <div class="project-item">
                            <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
                            <h1>Project</h1>
                        </div>
                        <div class="project-item">
                            <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
                            <h1>Project</h1>
                        </div>
                        <div class="project-item">
                            <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
                            <h1>Project</h1>
                        </div>
                        <div class="project-item">
                            <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
                            <h1>Project</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

如果你稍微改变一下样式应该没问题。

给容器（在您的网页上可拖动的 div）

overflow-x: auto;

width: 100%;

并设置其子项（行）的宽度

width: 2500px;

那么，无论何时你使用那个 codepen，你都应该是好的。

<div class="et_pb_row et_pb_row_7 draggable" style="
    overflow-x: auto;
    width: 100%;
">
  <div class="et_pb_column et_pb_column_4_4 et_pb_column_17  et_pb_css_mix_blend_mode_passthrough et-last-child" style="
    width: 2500px;
  ">
    Items here
  </div> 
</div>