Добавление вертикального пространства между элементами HTML (divs) в одном контейнере
(Обновлено: как и после применения приведенного ниже решения, теперь у меня есть пробелы между блоками каналов в представлении на рабочем столе, но это не работало в представлении на мобильных устройствах)
У меня есть следующий код, и он хорошо работает, перетасовывая элементы внутри контейнера, но проблема в том, что блоки контента располагаются близко друг к другу, без вертикального пространства между ними.
Я пытался добавить между ними много тегов, таких как p и br, чтобы получить желаемое пространство, но это привело к неупорядоченному пространству, поэтому некоторые блоки получили место, а некоторые нет, а иногда это вообще останавливает перетасовку.
Поэтому мне нужен какой-то способ добавить пространство между всеми элементами div, сохраняя при этом функцию перетасовки.
// Function to shuffle the order of elements within a container
function shuffleElements(container) {
var elements = container.children;
for (var i = elements.length; i >= 0; i--) {
container.appendChild(elements[Math.random() * i | 0]);
}
}
// Wait for the page to fully load before shuffling the elements
window.addEventListener('load', function() {
var container = document.getElementById('your-container-id'); // Replace 'your-container-id' with the ID of the container div that holds the RSS feed divs
shuffleElements(container);
});<div id = "your-container-id">
<div class = "fb-page" data-href = "https://www.facebook.com/saudioffers6" data-tabs = "timeline" data-width = "500" data-height = "500" data-small-header = "false" data-adapt-container-width = "false" data-hide-cover = "true" data-show-facepile = "false">
<blockquote cite = "https://www.facebook.com/saudioffers6" class = "fb-xfbml-parse-ignore"><a href = "https://www.facebook.com/saudioffers6">عروض السعودية saudi offers</a></blockquote>
</div>
<div class = "fb-page" data-href = "https://www.facebook.com/diyprocom" data-tabs = "timeline" data-width = "500" data-height = "500" data-small-header = "false" data-adapt-container-width = "false" data-hide-cover = "true" data-show-facepile = "false"><blockquote cite = "https://www.facebook.com/diyprocom" class = "fb-xfbml-parse-ignore"><a href = "https://www.facebook.com/diyprocom">Diy pro</a></blockquote></div>
<div class = "fb-page" data-href = "https://www.facebook.com/MarinaFish2019" data-tabs = "timeline" data-width = "500" data-height = "500" data-small-header = "false" data-adapt-container-width = "false" data-hide-cover = "true" data-show-facepile = "false"><blockquote cite = "https://www.facebook.com/MarinaFish2019" class = "fb-xfbml-parse-ignore"><a href = "https://www.facebook.com/MarinaFish2019">مارينا للأسماك والرخويات</a></blockquote></div>
<div class = "fb-page" data-href = "https://www.facebook.com/nursery.libya" data-tabs = "timeline" data-width = "500" data-height = "500" data-small-header = "false" data-adapt-container-width = "false" data-hide-cover = "true" data-show-facepile = "false"><blockquote cite = "https://www.facebook.com/nursery.libya" class = "fb-xfbml-parse-ignore"><a href = "https://www.facebook.com/nursery.libya">مشتل تمنهنت</a></blockquote></div>
</div>Будет очень сложно помочь в отладке, не видя вашего кода. Вы можете попробовать создать кодовую ручку, если она не будет публиковаться здесь, но вполне вероятно, что причина, по которой она не публикуется здесь, заключается в том, что ваш пример не является MRE. Вы хотите воссоздать проблему с нуля, используя только те части, которые абсолютно необходимы для воссоздания проблемы.
Я согласен с @asyncawait, что отлаживать сложно, не видя вашего кода. Вы пробовали поля или отступы CSS? Может быть, используя сетку и зазор?
У меня очень мало знаний обо всей проблеме, и, честно говоря, я получил код с некоторой помощью, но больше не смог найти помощника, а проблема с пробелами убивает весь достигнутый нами успех.
@asyncawait Я наконец-то добавил код, пожалуйста, проверьте его
@mykaf Я наконец-то добавил код, пожалуйста, проверьте его
Ваш фрагмент стека вызывает ошибку.
Когда я запускаю jsfiddle, кажется, что они выстраиваются вертикально; есть ли у вас какой-нибудь CSS, который бы располагал их горизонтально, чтобы между ними было вертикальное пространство?
данное решение Дэвида Гарсиа создает пространство между блоками на рабочем столе, но не на мобильном устройстве, могу ли я что-нибудь сделать, чтобы оно отображалось на мобильных устройствах, кстати, я использую Shopify
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете добавить несколько стилей, чтобы добавить вертикальное пространство между элементами.
По сути, вы можете добавить отступы или поля внизу каждого дочернего элемента #your-container-id, кроме последнего.
Для этого вы можете попробовать следующий код:
<style>
#your-container-id > *:not(:last-child) {
margin-bottom: 50px; /* change this with the value you want */
}
</style>
Большое спасибо, все сработало, как и просили, и перетасовка все еще работает.
я рад это слышать
Привет, Дэвид! Извините, но решение работало на настольном компьютере, но не работало на мобильном телефоне. Мы можем что-нибудь сделать?
Мне удалось решить проблему просмотра на мобильных устройствах, используя приведенный ниже код, и он работает как для настольных компьютеров, так и для мобильных устройств. Спасибо вам всем
<style>
#your-container-id {
/* Using the grid property */
display: grid;
/* Making equal spaced divs */
gap: 1rem;
}
</style>
вот мой код: