移动特定元素

Question

我目前正在使用WordPress构建网站。我正在尝试使用CSS为产品页面布局listview，但我遇到了一些问题。这些元素背后的代码在WordPress文件中，所以如果可能的话我宁愿不接触它们。

我要做的是在标题旁边移动“MSDS”，因为它在标题之下。我已将其设置为相对位置并使用顶部和右侧像素值移动它。

例1

例2

我的第一个问题是，如果你看一下例子1.我在该特定标题旁边放置了“MSDS”，但是当你看实例2时，它的产品名称较短，但“MSDS”的定位是相同的因此看起来很傻。我该如何解决这个问题？

我的第二个问题可能是固定的，如果第一个问题是固定的，但在最大化的窗口上，布局看起来很好但是当调整到一个较小的窗口然后窗口覆盖“MSDS”但标题看起来很好，因为它包装所以它可以在页面。

我不完全确定在哪里寻找或者我应该寻找什么具体的东西来找到解决方案。所以任何帮助将不胜感激。下面的代码是我用来重新定位“MSDS”

的代码

{{1}}

Answer 1

您可以随时使用:after来完成这些事情

这些应该有所帮助。

在样式表中添加这些

.product-list .product-thumb .description:after {
  position: absolute;
  content: "MSDS";
  color: blue;
}

您可以相应地设置元素的样式

Answer 2

你正在寻找职位：亲戚和职位：绝对我认为。

试试这个：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%;
}