Hvordan kan jeg "posisjoner: faste" en div riktig?

stemmer
2

Hvis du vil ta en titt på min side http://www.metroflatsmiami.com/listing.html , vil du se at jeg har en flytende DIV på høyre, men tingen er det er satt av til venstre. Hvis du endrer størrelsen på vinduet (eller har en annen oppløsning), vil det ikke se til høyre. Jeg vil at det skal alltid være like til høyre for hovedinnholdet DIV, men fortsatt rulle ... noen tanker?

CSS:

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    left: 1000px;
}
Publisert på 30/12/2009 klokken 00:29
kilden bruker
På andre språk...                            


4 svar

stemmer
2

Yeah .... hvorfor ikke gjøre right: 50pxistedenfor left: 1000px?

Svarte 30/12/2009 kl. 00:33
kilden bruker

stemmer
1

Hvis du setter floating_price_box div å ha en venstre-verdi på 75%, vil den skalere med sidestørrelsen. Det bryter når nettleservinduet blir for liten, men vinduet må være ganske liten for det.

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

For å gjøre sidepanelet 25px til høyre for hovedinnholdet, kan du også gjøre noe som dette. Legg en indre div til flytende pris boks:

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

Og her er 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;
}

I utgangspunktet er alle denne andre metoden er å flyte utenfor boksene til riktig posisjon. Da den indre div er stylet for å fikse boksen vertikalt der du ønsker det.

Svarte 30/12/2009 kl. 01:06
kilden bruker

stemmer
3

Bruk jQuery:

$(window).bind("load resize", function(){
   $('.right-block').width($('.main-block').width() - (25));
});
Svarte 30/12/2009 kl. 01:23
kilden bruker

stemmer
0

Den enkleste måten er å plassere det som hovedinnholdet og deretter bruke margin til å skifte den til side:

.floating_price_box {
    position:fixed;
    width: 200px;
    border: solid 1px black;
    height: 400px;
    top: 50px;
    /*left: 1000px;*/
    margin-left : 700px;  /* main column width */
}
Svarte 30/12/2009 kl. 01:45
kilden bruker

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