适合行中的可变长度div

I have this: http://jsfiddle.net/o0na46er/1/

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

The problem with simply using display: inline-block is that it leaves big spaces to the right of the container.

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

How can I fit the divs, using JavaScript/jQuery, in the container such that it fits them as best it can to take up the whole width of the container?

我如何在容器中使用JavaScript / jQuery来适应div,以便尽可能地适应它们以占用容器的整个宽度?

2 个解决方案

#1

Float them.

.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;
}

<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>

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

#2

You should float your blocks to the left. See this fiddle: http://jsfiddle.net/o0na46er/4/

你应该把你的积木漂浮到左边。看到这个小提琴: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;
}

#1