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

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

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

<div >    <div >        <div >            column-1        </div>        <div >            column-1        </div>        <div >            column-1        </div>        <div >            column-1        </div>        <div >            column-1        </div>        <div >            column-1        </div>        <div >            column-1        </div>        <div >            column-1        </div>        <div >            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?

总结

以上是内存溢出为你收集整理的HTML – 为什么我的div没有高度？全部内容，希望文章能够帮你解决HTML – 为什么我的div没有高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。