Здравствуйте, Sta и добро пожаловать в Stack Overflow. Есть несколько проблем с вашим кодом, которые вызывают наложение:
- неочищенные плавающие элементы (
float: left;)
- дает фиксированную ширину и высоту
- дает ширину в процентах, которая не позволяет размещать три столбца (объявления) рядом друг с другом
- с использованием отрицательных полей (
margin-top: -140px !important;)
Довольно сложно дать вам простой ответ, который решит все ваши проблемы.
Вот несколько подсказок:
- При использовании плавающих элементов внутри контейнера, используйте
<br style="clear:both">, чтобы убедиться, что расчет высоты и ширины исправлен. Плавающие элементы удаляются из потока документов, в результате чего его родительские контейнеры не учитывают высоту и ширину плавающих дочерних элементов
- вместо фиксированной ширины, используйте (если требуется)
min-width: 100px; (100 как примерное значение), чтобы позволить большему количеству элементов быть в строке. Лучше всего было бы использовать flex box вместе с flex-wrap: wrap; для определения столбцов данных
Правила смешивания, такие как position: relative;, float: left; и margin-top: -140px;, часто являются признаком плохого дизайна GUI. Я бы рекомендовал сначала разработать только один блок, содержащий всю информацию, используя как можно меньше CSS, а на втором шаге проверить, как несколько из этих блоков располагаются рядом друг с другом.
Обновление 1:
Чтобы дать вам представление о том, как это может выглядеть, отметьте Codepen . По сути, мы устанавливаем, что списки занимают 20% от общей ширины, но расходуем их на доступную ширину, если остается место.
Вот оставшийся CSS, который я использовал:
.awpcp-listings {
display: flex;
flex-wrap: wrap;
}
.awpcp-listing-excerpt
{
min-width: 20%;
margin-right: 15px;
box-shadow: 0 8px 16px #888888 !important;
border-style: solid;
color: grey;
border-radius: 4px;
margin-bottom: 10px;
flex-grow: 2;
}
.awpcp-listing-excerpt-inner {
min-width: 140px;
min-height: 200px;
}
.awpcp-listing-excerpt-content {
display: none;
}
.awpcp-listing-title {
font-size: 10px;
padding: 5px;
text-align: left;
background-color: yellow;
}
.awpcp-listing-excerpt-extra {
margin-left: 20px;
}
Кстати, всегда старайтесь избегать !important, поскольку это делает перезапись невозможной. Вместо этого попытайтесь быть более явным в определении вашего правила.
Краткий пример:
У вас есть <div class="special">This is red</div> и соответствующие правила CSS, чтобы раскрасить DIV в желтый цвет:
div {
background-color: yellow;
}
но если вы хотите, чтобы он был красным, вы можете быть более точным и добавить правило:
div.special {
background-color: red;
}
Если вы видите, что один элемент не соответствует вашему правилу CSS, используйте Инструменты разработчика (F12 в большинстве браузеров) и нажмите «Проверить элемент», затем выберите элемент, который необходимо изменить. Затем вы увидите все правила CSS, применяемые к этому объекту, а затем сопоставите свои правила CSS, чтобы перезаписать эти правила, используя точно такое же правило. Для этого необходимо, чтобы ваш CSS-файл был загружен ПОСЛЕ предыдущего загруженного файла.
Обновление 2:
Сначала измените следующие правила CSS, чтобы элементы отображались в столбцах. Все закомментированные правила означают, что они должны быть удалены из таблицы стилей.
/* Inline #51 | https://adsler.co.uk/browse-adsler/ */
.awpcp-listing-excerpt {
min-width: 32%;
/* float: left; */
/* flex-grow: 2; */
}
.awpcp-listing-excerpt-extra {
/* height: 50%; */
}
/* awpcpstyle.css | https://adsler.co.uk/wp-content/plugins/another-wordpress-classifieds-plugin/resources/css/awpcpstyle.css?ver=3.9.5 */
.awpcp-listing-excerpt-small .awpcp-listing-excerpt-thumbnail, .awpcp-listing-excerpt-medium .awpcp-listing-excerpt-thumbnail {
/* float: left; */
}
.displayaditemseven {
/* width: 100%; */
}
.awpcp-listing-excerpt-medium .awpcp-listing-excerpt-thumbnail {
/* width: auto; */
}
.displayaditemsodd {
/* width: 100%; */
}
/* so-css-shapely.css | https://adsler.co.uk/wp-content/uploads/so-css/so-css-shapely.css?ver=1557474259 */
.awpcp-listing-excerpt-extra {
/* height: 0px; */
}
На втором шаге добавьте media query к вашей таблице стилей, чтобы показывать только два столбца, если размер экрана меньше 900 пикселей.
@media (max-width: 900px) {
.awpcp-listing-excerpt {
min-width: 46%;
}
}