html – 如何使多个相等大小的div块占用100％的父容器

概述我有以下CSS： #imageContainer { width: 100%; margin: 0px; margin-bottom: 10px;}.divSelectImage { border: 2px solid red; width: 25%; margin: 0px; margin-bottom: 10px; floa 我有以下CSS：

#imageContainer {    wIDth: 100%;    margin: 0px;    margin-bottom: 10px;}.divSelectimage {    border: 2px solID red;    wIDth: 25%;    margin: 0px;    margin-bottom: 10px;    float: left;}

我有四个.divSelectimage实例,这就是宽度为25％的原因.我希望在#imageContainer中并排看到所有四张图片.基本上,四个图像应该占据#imageContainer的100％,而#imageContainer又占据了屏幕的100％.

但我没有.尽管检查了萤火虫,每个25％,最后一张图片进入下一行.我必须使它们达到24.5％才能适应它们,但我不希望最后有空白区域.

这种情况发生在firefox和谷歌浏览器中.

我缺少某种CSS魔法吗？我怎么能做到这一点？

我已经在Jsfiddle：http://jsfiddle.net/J3KXE/上设置了场景

解决方法 这是因为你没有考虑每个图像的2px边框,除了包含块的100％宽度外还增加了12px.您可以使用CSS新增的 box-sizing属性将边框和填充区域约束为元素的内容宽度：

#imageContainer {    wIDth: 100%;    margin: 0px;    margin-bottom: 10px;}.divSelectimage {    border: 2px solID red;    -moz-Box-sizing: border-Box;    -webkit-Box-sizing: border-Box;    Box-sizing: border-Box;    wIDth: 25%;    margin: 0px;    margin-bottom: 10px;    float: left;}

http://jsfiddle.net/J3KXE/1/

总结

以上是内存溢出为你收集整理的html – 如何使多个相等大小的div块占用100％的父容器全部内容，希望文章能够帮你解决html – 如何使多个相等大小的div块占用100％的父容器所遇到的程序开发问题。

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