当前位置: 首页 > 面试题库 >

自动使外部div与其浮动内容的高度相同

桑思远
2023-03-14
问题内容

我想要div黑色的外部包装包裹它div的浮动。我不想使用style='height: 200pxdivouterdivID,因为我希望它自动将其内容的高度(例如,浮动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(不是一个好的解决方案)或:afterCSS伪元素(在较旧的IE中不受广泛支持)正常添加。

问题在于容器不会自然地扩展为包括浮动儿童。使用第一个示例警告您,如果在父元素之外还有子元素,则它们将被隐藏。您也可以使用’auto’作为属性值,但是如果任何元素出现在外部,这将调用滚动条。

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



 类似资料:
  • 问题内容: 我有2个div并排。我不知道它们的高度,它根据内容而改变。有没有一种方法可以确保它们始终保持相同的高度,即使其中一个拉伸时也只能使用CSS? 我做了一个小提琴来展示。我希望红色和蓝色的div高度相同… 这是CSS: 问题答案: 您可以尝试使用float来代替使用float。但是,您可能会发现某些较旧的浏览器不了解此规则。见下文:

  • 问题内容: 在下面的代码中,我希望带有“ y”的div将div的高度与3个“ x”相匹配。 需要注意的是内部div是浮动的。 问题答案: 如果您不反对使用jQuery,可以使用EqualHeight,它应该做您想要的

  • 问题内容: 我有这些嵌套的div,我需要主容器扩展(在高度上)以容纳内部的DIV CSS是这样的: 我的问题是无法拉伸以容纳所有内部div,结果它们一直在后台运行。 考虑到以上情况,如何解决此问题? 问题答案: 您需要在div关闭之前强制输入a 。我可能会将其移入div并将CSS设置为: 更新: 这个问题仍然有相当多的流量,所以我想使用CSS3中称为“弹性框”或“弹性框”的新布局模式,以一种现代的

  • 问题内容: 我多次使用float:right(或left)将图像和插入框浮动在容器的顶部。最近,我遇到了一个需要使div在另一个div的右下角浮动的问题,该浮动与您使用float获得的普通文本换行(仅在上方和左侧换行的文本)相同。 我认为即使float没有底值,这也必须相对容易,但是我无法使用多种技术来做到这一点,并且在Web上搜索除了使用绝对定位外别无其他选择,但这并没有给出正确的自动换行行为。

  • 问题内容: 这是HTML: 这是CSS: 使用Chrome开发人员工具检查后,内部div的高度为0px。 我如何强制其为父div高度的100%? 问题答案: 为了使高度基于其内容并基于其高度,使两个元素都绝对定位。 可以在css height属性的规范中找到更多详细信息,但本质上,如果的height为,则必须忽略height , 除非_绝对定位。然后,高度将为0, _除非 将其自身绝对定位。 但是

  • 问题内容: 我需要创建一个页面,该页面将使用Jquery和AJAX从外部页面加载div。 我遇到了一些很好的教程,但是它们都是基于静态内容的,我的链接和内容是由PHP生成的。 我基于我的代码的主要教程来自:http: //yensdesign.com/2008/12/how-to-load-content-via-ajax-in- jquery/ 我需要的确切功能如下: 主页包含一个永久div,其