如何使溢出容器可拖動

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;

然后，每當您使用該代碼筆時，您都應該很好。

 <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>