Block elements to wrap on text content

I have 2 divs that I want to position vertically, aligned to the left and I want their width to wrap based on the amount of text.

fiddle

<div class="main">
    <div class="line">Content content content content</div>
    <div class="line">Content content</div>
</div>

.main {
    position: absolute;
    color: white;
}
.line {
    padding: 3px;
    margin: 2px;
    background-color: #505050;
}

I came up with a possible solution but I want to know if there is a more straight forward solution than this.

The solution that I came up with was to make make the ".line" "display: inline-block", "white-space: nowrap" and to make the ".main" "width: 0".

solution fiddle

.main {
    position: absolute;
    color: white;
    width: 0;
}
.line {
    padding: 3px;
    margin: 2px;
    background-color: #505050;
    display: inline-block;
    white-space: nowrap;

    /* IE7 fix */
    zoom: 1;
    *display: inline;
}​

Is there a better option for this ?

The reason why I am asking if there is a more straight forward solution is because I think that "width: 0" and "white-space: nowrap" may affect different content.

---

As per i understand may be that's you want.

.main {
    color: white;
}
.line {
    padding: 3px;
    margin: 2px;
    background-color: #505050;
    float:left;
    clear:left;
}

Check this http://jsfiddle.net/2kmzK/1/

链接地址: http://www.djcxy.com/p/81358.html

上一篇: 内联，非外壳容器的流体宽度

下一篇: 块元素包装在文本内容上