Umieszczanie elementu po prawej stronie za pomocą CSS

Próbuję umieścić element css po prawej stronie nagłówka, ale nie jestem pewien, jak to zrobić. Próbowałem użyć:Umieszczanie elementu po prawej stronie za pomocą CSS

position: Absolute; top: 20px; right 0px;

To by działało, ale jeśli wyregulujesz przeglądarkę, tekst przesunie się wraz z nią.

stworzyłem JFiddle, które można znaleźć tutaj:

http://jsfiddle.net/rKWXQ/

W ten sposób można zobaczyć, co usiłuję zrobić. Mam wewnątrz zawiniętego elementu div tekst o nazwie Call Now (555) 555-5555.

Oto element nagłówka, a wewnątrz niego mam element right_header.

<div id="header"> 
     <span class="right_header">Call Now (555) 555-5555</span> 
    </div>

Oto mój nagłówek CSS:

/* Header */ 
    #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;} 
    .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

Czy ktoś mógłby mi powiedzieć właściwą drogą do osiągnięcia tego proszę?

Uwaga na lewej stronie pojawi się logo, które nie załaduje się w JFiddle!

Dzięki!

Źródło

2013-10-09 Frank G.

Możesz łatwo po prostu float po prawej stronie, bez potrzeby ustawiania pozycji na relative lub absolute.

.right_header { 
    color: #fff; 
    float: right; 
}

Updated jsFiddle - może trzeba dodać trochę padding/margins - like this.

Źródło

2013-10-09 05:04:00

Że to zrobił !!! Ugg, dlaczego nie pomyślałem o tym hahaha, przepraszam, że powinienem to dostać!Teraz jestem rozczarowany próbując nauczyć się tych rzeczy i tęskniłem za tym. Dziękuję Ci! –

Pokonaj mnie, +1: P Dalsze czytanie: Przyda się to, gdy pływasz w kontenerach niepławianych: http://www.webtoolkit.info/css-clearfix.html –

@ francisco.preller Tak, to może być pomocnym. Alternatywnie, zastosowanie 'overflow: hidden' do elementu nadrzędnego działa w zasadzie tak samo, jak w przypadku funkcji clearfix - wymuszając na nim zachowanie elementów potomnych. –

Jak wspomniał JoshC, używanie float jest jedną z opcji. Myślę, że twoja sytuacja sugeruje inne rozwiązanie.

Musisz ustawić position: relative na elemencie #header w porządku dla position: absolute na #right_header odniosły skutek. kiedy to ustawisz, możesz ustawić pozycję na #right_header, ale chcesz uzyskać względną wartość w stosunku do #header

Źródło

2013-10-09 05:10:19

1+ Dobry punkt .. –

Dziękuję, że był bardzo pomocny! Ale float może to zrobić. Czy jest jakaś różnica między używaniem float a pozycją? Czy powinienem powiedzieć, czy lepiej jest użyć pozycji vs float? –

@FrankG. Zwykle unikam pozycjonowania absolutnego z dokładnie tego powodu, o którym wspomniałeś, ale pływaki też mają swoje upadki. Warto wspomnieć, że elementy absolutnie pozycjonowane są usuwane z normalnego przepływu. –

Odpowiedź na pytanie płynące z JoshC będzie działała dobrze, ale myślę, że jest powód, dla którego to nie działa.

Powód, dla którego twój kod nie działa, jest to, że pozycja bezwzględna jest względna w stosunku do wymiarów 0x0.

Aby kod działał, symbol powinien być ustawiony w pozycji absolutnej.

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

zmienić go ...

#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

Źródło

2013-10-09 05:11:56 contehhh

Można to zrobić w ten sposób także jeśli chcesz robić z pozycji, spróbuj to proszę

#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;} 


.right_header{color: #fff; position: absolute; top: 0px; right: 0px}

Źródło

2013-10-09 05:57:36

@Frank G. Sprawdź także ten CSS. –

Umieszczanie elementu po prawej stronie za pomocą CSS

Odpowiedz

Powiązane problemy