Question

我有一个CSS布局，实际上是这样的：

|---------------------|
|                     |
|                     |
|                     |
|------------|--------| 
|            |   ***  | < article header
|   main     |--------| 
|  content   |        |
|            |        | 
|------------|--------|

在右侧，我有一个带有文章元素的侧边栏。该文章的标题具有绝对位置。该标题的高度是可变的，并在我的网站上发生变化。我想要实现的是垂直对齐标题以获得：

|---------------------|
|                     |
|            |--------| 
|            |   ***  | < article header
|------------|--------| 
|            |        | 
|   main     |        | 
|  content   |        |
|            |        | 
|------------|--------|

有谁知道我怎么能这样做？非常感谢！

这是一个小提琴：http://jsfiddle.net/UhT5F/

HTML：

<div id="content">
    <div id="inner-content">
        <div id="main"></div>
        <div id="sidebar">
            <article>
                <header>article header</header>
                <p>article content</p>
                <footer>article footer</footer>
            </article>
        </div>
    </div>
</div>

实际的CSS：

#content {
    margin-top: 10em;
}
#inner-content{
    max-width: 1140px;
    width: 96%;
    margin: 0 auto;
}
#main{
    position: relative;
    float: left;
    border-top:1px solid blue;
    width:65%;
}
#sidebar{
    float:right;
    width:33%;
    background-color:#DDD;
    padding:1%;
}
#sidebar article{
    position:relative;
}
#sidebar article header{
    border-bottom:1px solid blue;
    position:absolute;
    top:0;
}

非常感谢！

Answer 1

请尝试使用top，而不要使用bottom:100%。您可以使用margin-top微调此对齐，例如几个像素。

Answer 2

按如下所示更改#sidebar

#sidebar{
    float:left;
    width:33%;
    background-color:#DDD;
    padding:1%;
    margin-top:-25px;
}

http://jsfiddle.net/sentmca/UhT5F/3/

Answer 3

请检查这个编辑过的小提琴...... 与minus margin and absolute display ..

http://jsfiddle.net/UhT5F/1/

如何垂直对齐一个绝对元素与其父元素之上的可变高度？

3 个答案: