css - 为什么包含的 div 无法识别其中元素的高度?

标签 css html xhtml height css-float

<分区>

我的包含 div (boxes_blue) 如何识别其中元素的高度?

#boxes_blue {
display: block;
margin: 0 0 0 175px;
border: 1px solid brown;
clear:  both; 
}

#boxes_blue_each {
float: right;
height: 100px;
width:  100px;
padding: 10px;
border-left: 3px solid #fff;
background-color: #004964;
color: #fffacf;
text-transform: uppercase;
text-align: left; 
}

<div id="boxes_blue"> <div id="boxes_blue_each">one</div> <div id="boxes_blue_each">two two</div> <div id="boxes_blue_each">three three three</div> <div id="boxes_blue_each">four four four four</div> </div>

最佳答案

发生这种情况是因为包含的 div 都是 float 的。

我不确定为什么会这样,但我知道一些解决方案。要么将包含的 div 设置为具有“溢出:隐藏”,要么在 float div 下方添加另一个具有“clear:both”的 div。当然,您也可以设置包含的 div 的高度和宽度。

关于css - 为什么包含的 div 无法识别其中元素的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3729801/

相关文章:

jquery - Backbone.js View 中更灵活的 tagName

css - 如何在悬停时将边框居中

javascript - Webpack - 样式表加载但没有字体

html - CSS淡入背景

javascript - 框架的可用性问题是什么?

html - 无背景的等高列

html - 如何在 XHTML 中使用 HTML5 特性

html - 什么是最小宽度 : 100%; width: auto actually do?

html - JSF 模板中的 CSS

css - Bootstrap 底部粘性页脚与网站重叠