我有背景图片(图片大小为 2600x1170)
sbBody {
background: #999 url(footer_bg.jpg) center top no-repeat;
overflow-y: scroll;
overflow-x: hidden;
height: 1105px;
font-family: Serif, Georgia, Times New Roman, Times;
font-size: 12px;
}
我在这个图像上有一个特殊区域(在图像的右侧),我需要显示应该在这个区域的特殊 div,我用 float right 和 margin 做到了
.main_box {
float: right;
margin-right: 505px;
margin-top: 75px;
}
它在 1900x1200 的屏幕分辨率下看起来不错,但如果我更改浏览器大小,我的边距 div 就会损坏。 在浏览器窗口大于 800px 之前,我如何才能拥有相同的 div 位置;
<body class="sbBody">
<div class="main_box">
</div>
</body>
谢谢。
最佳答案
当您将 div
float 到右侧时,您需要使用以下方法将背景固定在顶部和右侧:
background-position:top right;
代替top center
看到这个 DEMO
CSS:
.sbBody {
background: #999 url(http://lorempixel.com/output/nature-q-g-1280-720-10.jpg) right top no-repeat;
overflow-y: scroll;
overflow-x: hidden;
height: 1105px;
font-family: Serif, Georgia, Times New Roman, Times;
font-size: 12px;
}
.main_box {
float: right;
margin-right: 505px;
margin-top: 75px;
background:gold;
}
关于jquery - 在任何屏幕尺寸下将 div 向右浮动,边距向右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23065799/