Question

我有一项相当简单的任务。 3个具有不同背景的DIV：第1个 - 顶部附录，第2个 - 底部appednix，第3个 - 重复背景。当我在这3个包装内容中留下内容时，我从顶部和底部使用了间隔物，我无法使用负边距去除。那么，CSS是：

.cBlock {
    background: url('top.png') no-repeat center top;
    padding-top: 16px;
}

.cBlock .inner1 {
    background: url('bottom.png') no-repeat center bottom;
    padding-bottom: 130px;
}

.cBlock .inner2 {
    background: url('bg.png') repeat-y center;
    min-height: 250px;
}

.cBlock .inner3 {
    margin-bottom: -130px;
}

HTML是：

    <div class="cBlock"><div class="inner1"><div class="inner2"><div class="inner3">
        123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
    </div></div></div></div>

And results is

Answer 1

您需要立即关闭第一个和最后一个DIV。

<div class="cBlock">

    <div class="top"></div>

    <div class="content">
        123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
    </div>

    <div class="bottom"></div>
</div>

现在您可以直接定位这些元素（position），也可以使用填充和负边距。

这也是你可以通过CSS实现的：

<div class="content">
    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div>

/* styling */
.content:before {}
.content {}
.content:after {}

Answer 2

将行高调整为line-height:0px为父级，将line-height:normal重置为子级好的！

如何使DIV吸收空间

2 个答案: