Question

如果我创建一个容器div然后创建一些div子（比如说三个），并设置父级显示：inline-block，我会得到类似这样的内容jsfiddle-good

proper inline-block functionality

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 class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>

</div>

那很好！我要那个。当我有很多孩子（比如30）jsfiddle-bad

时会出现问题

inline-block with extra white-space

为什么这个空白区域会出现问题？如何让容器div适当缩小尺寸？

Answer 1

那个空间在那里，因为盒子无法放入那个空间，所以我只增加了10个宽度而没有更多的空间。如果需要，这里是代码的链接： http://jsfiddle.net/AnDrewpa18/t5Nth/

HTML

<body>
<div id="container">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">child 2</div>
    <div class="child">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;
}

与许多孩子一起打线

1 个答案: