Wie kann ich „position: fixed“ ein div richtig?

stimmen
2

Wenn Sie einen Blick auf meine Seite nehmen werde http://www.metroflatsmiami.com/listing.html , werden Sie sehen , dass ich eine Floating - DIV auf der rechten Seite haben, aber die Sache ist es auf der linken Seite den Weg ist. Wenn Sie die Fenstergröße ändern (oder eine andere Auflösung haben), wird es nicht richtig aus. Ich will es immer nur von dem Hauptinhalt DIV nach rechts sein, aber noch Scrollen ... irgendwelche Gedanken?

Die CSS:

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    left: 1000px;
}
Veröffentlicht am 30/12/2009 um 03:29
quelle vom benutzer
In anderen Sprachen...                            


4 antworten

stimmen
2

Ja .... warum nicht right: 50pxstatt left: 1000px?

Beantwortet am 30/12/2009 um 03:33
quelle vom benutzer

stimmen
1

Wenn Sie die floating_price_box div gesetzt einen linken Wert von 75% haben, wird es mit der Seitengröße skalieren. Es bricht, wenn die Browser-Fenster zu klein werden, aber das Fenster ziemlich klein sein muss dafür.

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

Um die Sidebar 25px rechts von dem Hauptinhalt zu machen, könnte man auch etwas tun. Fügen Sie einen inneren div zu Ihrer schwimmenden Preis-Box:

<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>

Und hier ist Ihre 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;
}

Grundsätzlich sind alle diese zweite Methode tut, ist die Außenboxen in die richtige Position schweben. Dann wird die innere div harmoniert ausgezeichnet mit dem Feld vertikal zu fixieren, wo Sie es wollen.

Beantwortet am 30/12/2009 um 04:06
quelle vom benutzer

stimmen
3

Verwenden Sie jQuery:

$(window).bind("load resize", function(){
   $('.right-block').width($('.main-block').width() - (25));
});
Beantwortet am 30/12/2009 um 04:23
quelle vom benutzer

stimmen
0

Der einfachste Weg ist es, wie der Hauptinhalt zu positionieren und dann Rand zur Seite zu verschieben, verwenden:

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    /*left: 1000px;*/
    margin-left : 700px;  /* main column width */
}
Beantwortet am 30/12/2009 um 04:45
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more