左欄問題

我正在爲我的網站使用左欄。基本上，左欄由三個div元素組成，其中id="profile"。另外我已將child div元素向左移動。左欄問題

我現在面臨的問題：

我分析了在Mozilla Firefox的Firebug的問題，每一個的寬度等於父元素，但我不知道怎麼辦。

其次，child div元素的高度不等於父元素。我嘗試將div元素的height設置爲100%或34px，但這並不能解決問題。

第三，我添加了漸變作爲左欄的背景，但背景顯示爲一些純色。我在正常漸變後臺之前添加了供應商前綴。但我真的不知道爲什麼會發生這種情況。

我增加了jsbin演示爲this例如

來源

2013-01-13 Sumit Gera

首先給每個div元素添加**不同的id **。與多個ID相同的ID是無效的HTML。 –

糾正了這個問題。 –

CSS漸變語法需要使用前綴。由於舊版瀏覽器根本不支持此語法，因此應先定義後備規則，然後設置不同的供應商變體。 –

的CSS語法Firefox已經被改成這樣：

-moz-linear-gradient(bottom, rgb(213,213,213) 0%, rgb(237,237,237), rgb(213,213,213) 100%);

高度正好被設置在圖像容器，而不是leftbar，將左欄設置爲高度34（和/或使用線高來垂直居中）：

.leftbar{ 
    widh:70%; 
    color:#000; 
    font-family:Calibri; 
    font-size:12px; 
    font-weight:700; 
    text-decoration:none; 
    text-align:center; 
    height:34px; 
    line-height:34px; 
    float:left; 
}

來源

2013-01-13 09:36:36

'圖片'現在不顯示。 –

@SumitGera我在示例中看不到您的圖片，但是您確定它們符合.image容器的大小嗎？您是否將左側的浮動圖像添加到了.leftbar - >否則.image會顯示在左側的下方，您看不到它（因爲文本不適合26％的大小）。 –

我的意思是具有'class =「image」''的'div'元素。設置一個低於26％的寬度應該可以工作，但事實並非如此。 –

回答

相關問題