如何使溢出容器可拖动
How to make a overflow container draggable
我在尝试使我在 Divi 中创建的溢出容器可拖动时遇到一些问题。
经过研究,我发现了一些与我正在寻找的内容相关的模板。但是,由于必须在主题中创建容器的方式,将无法工作。
我在下面的网站开发中添加了一个 link,这样您就可以看到容器的设置方式。任何关于如何实现我想要的结果的建议都将不胜感激。
我正在努力实现的示例
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>
稍微改变一下样式应该没问题。
给容器(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>
我在尝试使我在 Divi 中创建的溢出容器可拖动时遇到一些问题。
经过研究,我发现了一些与我正在寻找的内容相关的模板。但是,由于必须在主题中创建容器的方式,将无法工作。
我在下面的网站开发中添加了一个 link,这样您就可以看到容器的设置方式。任何关于如何实现我想要的结果的建议都将不胜感激。
我正在努力实现的示例
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>
稍微改变一下样式应该没问题。
给容器(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>