使用CSS將元素放置到右側

我想將css元素放置在標題的右側，但不確定如何做到這一點。我試過使用：使用CSS將元素放置到右側

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

這將工作，但如果您調整瀏覽器文本隨其移動。

我創建了一個JFiddle，你可以在這裏找到：

http://jsfiddle.net/rKWXQ/

這樣就可以看到什麼，我試圖做的。我在一個包裝的div元素中有一個文字，表示立即致電（555）555-5555。

這是頭元素，裏面有一個right_header元素。

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

這裏是我的頭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}

是否有人可以告訴我做到這一點，請正確的方法是什麼？

請注意，左側將有一個標誌，不會在JFiddle中加載！

謝謝！

來源

2013-10-09 Frank G.

您可以很容易地只是float它在右邊，沒有必要對relative或absolute進行定位。

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

Updated jsFiddle - 可能需要添加一些padding/margins - like this。

來源

2013-10-09 05:04:00

也做到了！ Ugg爲什麼沒有想到那個哈哈哈我很抱歉我應該得到它！現在我很失望一直試圖學習這些東西，我錯過了它。謝謝！ –

擊敗我，+1：P更深入的閱讀：當將內容浮動到非浮動容器中時，它會很有用：http://www.webtoolkit.info/css-clearfix.html –

@ francisco.preller是的，那可能會有幫助。或者，將「overflow：hidden」應用於父項的工作基本上與clearfix相同 - 強制它包含它的子項。 –

由於JoshC提到，使用float是一種選擇。不過，我認爲你的情況顯示了另一種解決方案

您需要在#header元素上設置position: relative以使#right_header上的position: absolute生效。一旦你設置，你可以自由地定位#right_header但是你想相對於#header

來源

2013-10-09 05:10:19

1+好點.. –

非常感謝您的幫助！但浮動可以做到這一點。使用浮點數還是位置有什麼區別？或者我應該說是使用position vs float更好嗎？ –

@FrankG。我通常避免絕對定位，因爲你提到的確切原因，但是花車也有他們的失敗。值得一提的是絕對定位的元素被排除在正常流程之外。 –

使用來自JoshC的漂浮物的答案將工作正常，但是，我認爲有一個原因，這是行不通的。

您的代碼無法正常工作的原因是絕對位置相對於維度爲0x0的位置。

爲了讓這段代碼正常工作，''應該是絕對的位置。

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

它更改爲...

#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;}

來源

2013-10-09 05:11:56 contehhh

如果你想與立場做你能做到這樣也試試這個請

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

來源

2013-10-09 05:57:36

@Frank G.檢查這個CSS也。 –

使用CSS將元素放置到右側

回答

相關問題