CSS - 1.標題不縮放2.浮動文本不在同一基線上

在this fiddle處，您可以看到一個標題欄，左側標題，右側標題。這個問題應該是顯而易見的，CSS - 1.標題不縮放2.浮動文本不在同一基線上

標題欄不完整的網站規模，僅可見部分
右邊浮動的文字粘在頭頂部，而不是在同一個基線作爲標題。

我該如何解決這個問題？有沒有更好的方法來實現我想要做的事情？

說明性：使用「標題不縮放」我的意思是它沒有寬度爲750px，因爲頁面太小，因此在#header中沒有定義。

來源

2012-03-06 Niklas R

有幾件事情：

無需浮子清除元件。只需在容器中添加overflow: auto;即可。
使用max-width而不是width，因爲它的尺寸很好。

試試這個：http://jsfiddle.net/PkkU8/7/

來源

2012-03-06 06:32:50 Blender

看到我上面的澄清，對不起。 :)這是什麼'溢出：汽車;'改變？我沒有看到差異（FF），文本仍然粘在條的頂部.. – 2012-03-06 06:39:21

'overflow-auto'可讓您刪除額外的HTML元素。如果我正確理解你，這是否工作：http://jsfiddle.net/PkkU8/9/ – Blender 2012-03-06 06:43:52

添加填充到fr類

.fr { 
float: right; 
padding: 9px 60px 0 0; 
}

來源

2012-03-06 06:30:40 Dips

9px是一個猜測嗎？我不認爲這是非常靈活的，還是唯一的選擇？ – 2012-03-06 06:35:50

這是修復頂部對齊，我不認爲有其他選擇。 – Dips 2012-03-06 06:40:43

對於1）由於攪拌機提到，設置max-width: 750px應該給你，你正在尋找靈活的頭寬度。這樣，你的標題永遠不會大於750px，但是如果窗口小於這個尺寸，它可以縮小。對於2）如果你不反對它，你可以絕對定位正確的塊而不是浮動它。你會不容易浮球可能會導致，尤其是問題時，你能保證正確的塊將是比頭本身較小：

.fr { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

這也要求其父DIV定位無論是絕對還是相對正常工作：

#head { 
    position: relative; 
}

來源

2012-03-06 06:33:38 fayerth

請參閱上面的澄清，對不起。 2）'絕對'使文本出現在頁面的底部，並且相對不會將它移動到右邊？ http://jsfiddle.net/PkkU8/8/ – 2012-03-06 06:41:53

我已經爲你更新了我的答案。如果您還有其他問題，請告訴我。 – fayerth 2012-03-06 07:24:30

CSS - 1.標題不縮放2.浮動文本不在同一基線上

回答

相關問題