在响应式环境中右对齐文本和图像堆栈

Question

我正在尝试将具有右对齐网站标题和标语的徽标堆叠在具有背景图像的全角标题中。在 html 模块中执行此操作相对简单，但如果可能，我想在标头模块中执行此操作（以便客户端可以轻松更改背景图像）。问题是徽标不会与标题和标语保持右对齐，而是会随着窗口大小和缩放级别的变化而水平移动。我附上了两张图片，标记为 desired 和 mis-aligned 显示问题。

我一直在尝试使用 ::before 伪类来做到这一点： 是否可以堆叠徽标、网站标题和网站标语并让它们完全对齐？我正在尝试将具有右对齐网站标题和标语的徽标堆叠在具有背景图像的全角标题中。问题是徽标不会与标题和标语保持右对齐，而是会随着窗口大小和缩放级别的变化而水平移动。

我一直在尝试使用 ::before 伪类来做到这一点：

.site-title::before {    
    content: "";
    background: url("http://www.acchs.edu/2014b/wp-content/uploads/ACCHS_Transparent-150x146.png")     
    no-repeat;
    display: block;
    clear: both;
    width: 150px;
    height: 150px;
    right: 150px;
    position: absolute;
    top: 0px;
    margin-top: 90px;
    margin-bottom: 0px;
}

Answer 1

我真的不明白为此使用::before 的意义，因为您可以将徽标作为h1 上方的图像放在HTML 中。无论如何，您可以通过提供 h1 position: relative 轻松地使用 :befre 执行此操作，以便 ::before 内容相对于 h1 定位。然后您只需调整徽标的定位。例如

h1 {
    position: relative; 
    margin-top: 0; 
    padding-top: 130px;
}
.site-title::before {
    content: "";
    background: url("http://www.acchs.edu/2014b/wp-content/uploads/ACCHS_Transparent-150x146.png") no-repeat;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
    margin:0;
}