在行中适合变长div

Question

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

简单使用display: inline-block在于，它在容器的右侧留有很大的空间。

如何使用JavaScript / jQuery将divs放入容器中，以使其最适合容器，使其占据容器的整个宽度？

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/

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