jquery - 在任何屏幕尺寸下将 div 向右浮动,边距向右

标签 jquery html css

我有背景图片(图片大小为 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/

相关文章:

jquery - div 中的流体跨度宽度

javascript - 在 Angular 2 中从 ngFor 生成子组件

css - 网站无法使用 HTTPS 正确加载

html - nav/ul/li 位置和位置中的段落

javascript - jQuery:防止单击子元素的类:在 tr 单击时重定向页面,除了某些 td

javascript - 使用 ENTER 阻止提交而无需一张表单

javascript - 在 Javascript 表中添加从零开始的计数器

javascript - AngularJS 是否会在 jQuery 的回退中加载?

javascript - 如何让 Javascript 停止从展开/折叠栏中删除我的填充

html - 为什么我不能使用 CSS 来移动按钮?