Question

例如，我希望h1元素的大小可以调整以适应浮动的红色div。文本已经调整为float，但背景位于浮动元素后面。

我知道我可以为h1添加一个右边距，但红色块的宽度可以变化，我不能有可变边距。

CSS：

#redblock {            
    background: red;
    float: right;
    margin: 10px;
    width: 100px;
    height:100px;
}
#wrapper {
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    width: 300px;
}
p {
    background-color: #ffd;
}
h1 {
    background-color: #667788;
    font-size: 1.1em;
    margin: 10px 0;
}

HTML：

<div id="wrapper">
    <div id="redblock"></div>

    <h1>Test tEst teSt tesT</h1>

    <p>Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt
    tesT Test tEst teSt tesT Test tEst teSt tesT</p>
</div>

请参阅http://jsbin.com/ucili4

Answer 1

如果为width:80%添加h1，则会产生一个宽度，该宽度将找到当前红色框的中间位置。因此，如果您有更大或更小的红色框，我想它会起作用。（可能是灰色背景，是出于测试目的，对吗？）

示例：http://jsbin.com/okive4

如何调整块元素的边界框以适应浮动元素？

1 个答案: