CSS基本模板问题

时间:2013-10-03 03:05:37

标签: html css

在我的网站上有3个重要部分

  1. 顶栏(必须保持在顶部,不固定,40px高度,100%宽度)

  2. 时间轴总是浮动到主区域,时间轴不可调整,大小中等

  3. 主要区域重新调整大小,窗口水平滚动,只要你仍然可以保持向右/向左滚动,它可以是小宽度

  4. 这是我目前的进展......

    JSFiddle

    我的问题:

    1. 顶栏子元素未对齐。就像那些简单的输入/文本位于顶部栏的底部而部分是隐藏的,这不会发生在图像被删除的情况下?我需要顶部栏始终保持元素内联垂直居中,永远不要调整高度

    2. 我无法获得剩余高度的时间线和主要区域,我将它们放在800px,因为没有任何工作。

    3. width: 100%; height: 100% !important; margin: 0px;

3 个答案:

答案 0 :(得分:0)

我添加了填充物并检查了你的小提琴它看起来好多了。这就是你所追求的吗?

.top_bar
{
    z-index:100;
    width:100%;
    height:40px;
    max-height:40px !important;
    background-color:#ffff00;
    color:black;
    padding:40px;
    overflow: auto;
}

答案 1 :(得分:0)

对于您的顶栏,只需浮动您的图片:

.wtblogo {
    float:left; /* Add this to your current CSS */
}

并添加一个等于顶部条形高度的线条高度,以垂直对齐其中的对象:

.top_bar {
    line-height: 40px; /* Add this to your current CSS */
}

我不确定你的第二个问题是什么意思。

答案 2 :(得分:0)

对于#1,你可以通过添加:

轻松修复它
vertical-align: middle;

到您的图片类。

所以你会:

.wtblogo {
    height: 40px;
    vertical-align: middle;
}

对于#2,我不确定你要做什么。你能澄清一下吗?