html – 内联块与许多孩子打破_html-js-css

概述如果我创建一个容器div然后创建一些div子(比如三个),并设置父级显示：inline-block,我得到类似这样的东西 jsfiddle-good CSS #container { border: 1px solid blue; padding: 2px; display: inline-block;}.child { width: 100px; 如果我创建一个容器div然后创建一些div子(比如三个),并设置父级显示：inline-block,我得到类似这样的东西 jsfiddle-good

CSS

#container {    border: 1px solID blue;    padding: 2px;     display: inline-block;}.child {    wIDth: 100px;    border: 1px solID black;    float: left;    margin: 2px;}

HTML

<div ID="container">    <div >child 1</div>    <div >child 2</div>    <div >child 3</div></div>

非常好！我要那个.当我有很多孩子(比如30)jsfiddle-bad时会出现问题

为什么那个空白区域是空的,以及如何让容器div正确缩小尺寸？

解决方法那个空间在那里,因为盒子不适合那个空间,所以我只增加了10个宽度,没有更多的空间.如果需要,这里是代码的链接：
http://jsfiddle.net/AnDrewpa18/t5Nth/

HTML

<body><div ID="container">    <div >child 1</div>    <div >child 2</div>    <div >child 3</div>    <div >child 1</div>    <div >child 2</div>    <div >child 3</div>    <div >child 1</div>    <div >child 2</div>    <div >child 3</div>    <div >child 1</div>    <div >child 2</div>    <div >child 3</div>    <div >child 1</div>    <div >child 2</div>    <div >child 3</div>    <div >child 2</div>    <div >child 2</div>    <div >child 2</div>    <div >child 2</div>    <div >child 2</div>    <div >child 2</div></div>

CSS

#container {    border: 1px solID blue;    padding: 2px;    display: inline-block;}.child {    wIDth: 110px;    border: 1px solID black;    float: left;    margin: 2px;}

总结

以上是内存溢出为你收集整理的html – 内联块与许多孩子打破全部内容，希望文章能够帮你解决html – 内联块与许多孩子打破所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1055282.html

html – 内联块与许多孩子打破

发表评论

评论列表（0条）