Question

所以我试图让网站的标题在左边有公司标志，然后在右边有数字和座右铭。我这样做的方法是在div中创建数字和座右铭，使其位置绝对，并使用left属性将其推到正确的位置。这工作正常，除了在较大的显示器上。 div似乎移动到屏幕边缘的左侧，而不是它所在的div边缘的左边。这是代码，知道我错过了什么？

<!-- HTML -->
<div id="wrap">
<img id="pic1" alt="Company Logo" src="../Images/******OfficialLogo.jpg">
<div id="contain1">
    <span class="style1">Call (800) ###-####&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
    <span class="style2"><em>Providing sales and management solutions to independent retailers since 1978</em></span>
</div>

<!-- CSS stylesheet -->
#wrap {
width: 1000px;
margin: 0 auto;
}
#contain1 {
display: block;
position: absolute;
text-align: right;
top: 15px;
left: 215px;
}

Answer 1

以下是我了解您的需求：

徽标应位于页眉的左上角。（在屏幕的左侧）
数字和座右铭应位于页眉的右侧。（在屏幕的右侧）

如果我更正，那么你想将你的CSS更改为

#wrap {
    width: 100%;
    margin: 0 auto;
}
#contain1 {
    display: block;
    text-align: right;
    float: right;
    top: 15px;
}

您希望标题可以跨越整个网站的宽度。

另外，如果没有绝对位置，浮动contains1对象是一个好主意。

Result shown in the Fiddle.

在所有显示器尺寸上将div移至右侧

1 个答案: