HTML – 为什么我的div没有高度？

发布时间：2020-12-14 23:32:51 所属栏目：资源来源：网络整理

导读：我试图模仿twitter的bootstrap css框架使用的行列机制. 我有一个div包含一些其他div本身包含来内容.在我的元素检查器中,它将容器显示为没有高度. div的高度不应该是它包含的元素的高度吗？ div class="container" div class="row yellow" div class="column-

我试图模仿twitter的bootstrap css框架使用的行列机制.

我有一个div包含一些其他div本身包含来内容.在我的元素检查器中,它将容器显示为没有高度. div的高度不应该是它包含的元素的高度吗？

<div class="container">
    <div class="row yellow">
        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>
    </div>
</div>

这是一个jsfiddle：

HTML/CSS in question

解决方法

高度或容器为0的原因是因为您将其中的所有内容浮动并且浮动元素不会扩展其父项的高度(或宽度).

当你将所有元素排成行时,它的高度为0,因此具有.container.

为防止这种情况,您可以：

>设置溢出：隐藏;在容器demo上
>用容器末端的块状元件清除浮子,并清除：两者; demo

您也可以查看此问题以供参考：How do you keep parents of floated elements from collapsing?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!