Question

从我所看到的，这是一个棘手的问题。基本上，我的警报消息需要出现在导航下方的页面上以及下面的内容之上。这里最好用小提琴显示http://jsfiddle.net/53b6g/1/ - 注意评论的样式 - 不能使用这种风格b / c我不知道页面上会有多少警报。所以wrapper元素的高度未知。

HTML：

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
        <div class="tr">
            <div class="td">
                but wait - there could be 3 or 2 or 1 so can't use height calculations
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS：

/*can't use style*/
.wrapper{
    position: relative;
    top: -4px;
    margin-bottom: -70px;
}
/*end can't use style*/


.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}

这是一个小提琴，没有注释代码显示手头的问题http://jsfiddle.net/8Awze/。这是否可以单独用CSS解决？

HTML：

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS：

.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}

Answer 1

如果我理解正确，您应该可以使用position: absolute，如下所示：

.wrapper{
    position: absolute;
    width: 100%;
    top: 25px;
}

http://jsfiddle.net/53b6g/2/

高度未知的中心元素，不占用空间

1 个答案: