javascript - 在行中放置可变长度的 div

Question

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

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

我如何使用 JavaScript/jQuery 将 div 放入容器中，使其尽可能占据容器的整个宽度？

Answer 1

漂浮它们。

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