css - 将 div 宽度设置为没有内联 block 的内容

Question

我想将 div 的宽度设置为它们的内容，并将 div 保持在彼此之下。使用 display:inline-block 可以有效地使 div 相邻 float 。我该怎么做？

Answer 1

Working jsFiddle Demo

考虑以下标记:

<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>

float 并清除所有内容，这是 CSS:

.text {
    background: yellow;
    float: left;
    margin-bottom: 3px;
    clear: both;
}