左栏问题

我正在为我的网站使用左栏。基本上，左栏由三个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％的宽度应该可以工作，但事实并非如此。 –

回答

相关问题