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

Question

我想将 div 的宽度设置为其内容并将 div 保持在彼此之下。使用display:inline-block有效地浮动 div 彼此相邻。我怎样才能做到这一点？

Answer 1

Working jsFiddle Demo

Consider the following markup:

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

Float and clear all, here is the CSS:

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

Answer 2

Put clear: both on them this will keep them from floating, and yes you do need float "something"

#div1, #div2{

    display: inline;
    float: left;
    clear: both;
    border: 1px solid grey;

}

<div id="div1">some content here that is bigger</div>
<div id="div2">some content here</div>