我想要外面的div,它是黑色的,用来包裹漂浮在里面的div.我不想使用带有outerdivid的div中的style='height: 200px,因为我希望它自动成为其内容的高度(例如,浮动div).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

如何做到这一点呢?

推荐答案

您可以将outerdiv的CSS设置为

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

也可以通过在末尾添加元素clear: both来实现.这可以通过JS(不是一个好的解决方案)或:after CSS伪元素(在旧版IE中不广泛支持)正常添加.

问题是,容器不会自然扩展以容纳漂浮的 children .请注意,使用第一个示例时,如果父元素之外有任何子元素,则它们将被隐藏.您也可以使用‘auto’作为属性值,但是如果有任何元素出现在外部,这将调用滚动条.

您也可以try 浮动父容器,但根据您的设计,这可能是不可能的/困难的.

Html相关问答推荐

如何使用wai-aria标签访问相关的复选框?

隐藏滚动条和禁用文本 Select 的CSS技术?

带有多种 colored颜色 的HTML按钮

标签数据的XPath?

创建一个带有div和径向渐变的全宽半圆

如何更改计时器S输入的Angular 字体大小?

如何使用CSS在<;表格中<;SVG&>?

防止position:relative的child在出界时收缩

更改Angular 为17的material Select 字段的高度?

使用`<;use>;`与`<;img>;`时呈现的SVG大小不同

使用bash从html表格中提取表格

如何在CSS中延迟触发2个转换?

第 117 行的块标记无效:endblock,应为empty或endfor.您是否忘记注册或加载此标签?

如何垂直对齐列表中的图像和文本?

需要帮助个性化我的 CSS 导航栏:如何在鼠标悬停时突出显示
  • 元素?
  • 如何调整底部有 SVG 的元素的高度,使其在所有宽度上看起来都不错?

    父背景仅在子元素中可见

    如何在 bootstrap 程序导航栏中居中搜索图标

    AWS SES:如何正确使用 CSS

    为什么跨域属性对预连接链接很重要?