html - float 创建重叠的 Div

标签 html css

我有两个 div(一个在另一个里面),当我将里面的一个 float 到“左”时遇到了一点问题。问题是外部 div 没有扩展其高度以适应内部 div 内的文本。由于这可能非常令人困惑,我将尝试用一些代码来解释它。

HTML:

<body>
    <div id="div1">
        Inner Div:
        <div id="div2">Testing long content.</div>
    </div>
</body>

CSS:

#div2 {
    float: left;
    width: 10px;
}

我更希望在测试时这实际上显示了我的问题,因为我还没有机会测试它。我的真实代码有更多属性,如果需要我会提供这些属性。

最佳答案

您需要使用 clear-fix。在 float 的 div 之后和包含的 div 中插入以下内容。

<div class="clear"></div>

并添加如下样式:

.clear { clear:both; }

例子:

<div class="container">
  <div class="floatedDiv">Hello World</div>
  <div class="clear"></div>
</div>

关于html - float 创建重叠的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1023159/

相关文章:

html - Twitter Bootstrap 轮播图像出现扭曲

html - 如何将 div 放在容器内彼此之上?

html - 我有一长串子元素属于同一类别,wordpress

JQuery 只允许使用此代码的一个按钮

javascript - 禁用小屏幕模式

python - 在 Django 元素中集成自定义 'change-list' 页面

javascript - 单击提交按钮并将数据插入 php 中的数据库表时如何显示隐藏表?

javascript - 发送的值被视为引用而不是值 javascript

css - 是否可以将 div 并排放置并将它们居中?

html - CSS 新手 - 过渡不起作用