Question

我有这个：http://jsfiddle.net/o0na46er/1/

简单地使用display: inline-block的问题是它在容器的右侧留下了大的空格。

如何在容器中使用JavaScript / jQuery来匹配div，以便尽可能地容纳它们以占用容器的整个宽度？

Answer 1

漂浮他们。

＆＃13;

.container {
    width: 230px;
    padding: 35px;
    background: #f5f5f5;
    overflow:hidden; /* so that it expands to fit its floated contents */
}

.block {
    float:left; /* make them float to avoid the whitespace affecting the layout */
    padding: 5px 10px;
    color: white;
    background: red;
    margin-right: 1px;
    margin-bottom: 5px;
}

＆＃13;

<div class="container">
    <div class="block">lorem</div>
    <div class="block">consectetur</div>
    <div class="block">adipiscing</div>
    <div class="block">eiusmod</div>
    <div class="block">tempor</div>
    <div class="block">commodo</div>
    <div class="block">aute</div>
    <div class="block">dolorem</div>
    <div class="block">velit</div>
    <div class="block">porro</div>
</div>

＆＃13;

http://jsfiddle.net/o0na46er/5/

Answer 2

你应该将你的积木浮动到左边。看到这个小提琴： http://jsfiddle.net/o0na46er/4/

.container {
    width: 230px;
    padding: 35px;
    background: #f5f5f5;
    height:auto;
    float:left;
}

.block {
    display: inline-block;
    padding: 5px 10px;
    color: white;
    background: red;
    float:left;
    margin-right: 1px;
    margin-bottom: 5px;
}

适合行中的可变长度div

2 个答案: