Question

如果您要查看我的网站http://www.metroflatsmiami.com/listing.html，您会看到我右侧有一个浮动DIV，但事情是它偏离了左侧。如果您调整窗口大小（或具有不同的分辨率），它将看起来不正确。我希望它始终只是主要内容DIV的右侧，但仍然滚动...任何想法？

CSS：

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    left: 1000px;
}

Answer 1

使用jQuery：

$(window).bind("load resize", function(){
   $('.right-block').width($('.main-block').width() - (25));
});

Answer 2

是啊....为什么不right: 50px代替left: 1000px？

Answer 3

如果将floating_price_box div设置为左值为75％，则它将随页面大小缩放。当浏览器窗口变得太小时它会中断，但窗口必须非常小。

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    left: 75%;
}

为了使侧边栏25px位于主要内容的右侧，您还可以执行此类操作。将内部div添加到浮动价格框中：

<div id='home_search_container'>
     ...content...
</div>

<div class="floating_price_box">
    <div class="floating_price_box_inner">
        Nightly Rate: $90 - $130 (<a href="#">Instant Quote</a>)<br/>
    </div>
</div>

这是你的CSS：

#main {
     float: left;
     margin-right: 25px;
     width: 700px;
}

.floating_price_box {
    float: left;
    width: 200px;
}

floating_price_box_inner {
     border: solid 1px black;
    height: 400px;
    position: fixed;
     top: 50px;
}

基本上所有这第二种方法都是将外框浮动到正确的位置。然后内部div被设计为将盒子垂直固定在你想要的位置。

Answer 4

最简单的方法是将其定位为主要内容，然后使用保证金将其转移到一边：

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    /*left: 1000px;*/
    margin-left : 700px;  /* main column width */
}

我怎样才能“正确定位”div？

4 个答案: