Переместить конкретные элементы
В настоящее время я создаю сайт с использованием WordPress. Я пытаюсь создать макет списка страниц для продуктов с помощью CSS, но у меня возникла пара проблем. Код этих элементов находится в файлах WordPress, поэтому я бы не стал их трогать, если это возможно.
То, что я пытаюсь сделать, это переместить «MSDS» рядом с заголовком, как это было раньше под заголовком. Я установил его в относительное положение и переместил, используя верхний и правый значения пикселей.
Пример 1
Пример 2
Моя первая проблема заключается в том, что если вы посмотрите на Пример 1. Я поместил «MSDS» рядом с этим конкретным названием, но когда вы посмотрите на Пример 2, у него более короткое название продукта, но позиционирование «MSDS» такое же, поэтому оно выглядит глупо. Как мне исправить это?
Моя вторая проблема может быть исправлена, если первая исправлена, но в развернутом окне макет выглядит хорошо, но при изменении размера на меньшее окно окно закрывает «MSDS», но заголовок выглядит хорошо, поскольку он переносится, так что его можно просматривать на странице.
Я не совсем уверен, где искать или какие конкретные вещи я должен искать, чтобы найти решение для этого. Так что любая помощь будет высоко ценится. Код ниже — то, что я использовал, чтобы изменить положение «MSDS»
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
Решение
Вы всегда можете использовать :after за эти вещи
Это должно помочь.
Добавьте их в свою таблицу стилей в
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
Вы можете соответственно стилизовать элемент
Другие решения
Вы ищете положение: относительное и положение: абсолютное, я думаю.
Попробуй это: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}