gpt4 book ai didi

css - 如何调整 block 元素的边界框以适应 float 元素?

转载 作者:太空宇宙 更新时间:2023-11-03 19:19:34 25 4
gpt4 key购买 nike

例如,我希望 h1 元素调整大小以适应 float 的红色 div 旁边。文本已经适应 float ,但背景在 float 元素后面。

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

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

最佳答案

如果您为 h1 添加一个 width:80% 将产生一个宽度,该宽度将找到当前红色框的中间。因此,如果您有更大或更小的红色框,我想它会起作用。 (可能是灰色背景,是为了测试目的,对吧?)

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

关于css - 如何调整 block 元素的边界框以适应 float 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4699026/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com