html - CSS：具有多行内容的浮动：最小宽度

Question

是否可以有一个具有多行内容以占用最小宽度的浮动元素？

只要内容只有一行，没有设置宽度的浮动元素使用的宽度最少。如果超过一行，则元素的宽度为 100%。

我的 HTML

<div class="wrap">
    <div class="floater"> <a class="left" href="#">
            <span class="right">Right<br>Right<br>Right</span>
            <span class="inner">Left: longword longerword evenlongerword longerword evenlongerword longword.
            </span>
        </a>
    </div>
</div>

我的 CSS

.wrap {
    width: 350px;
    border: 1px solid gold;
}
.floater {
    overflow: hidden;
    padding: 10px;
}
.left {
    float: left;
    border: 1px solid silver;
    padding: 5px;
}
.right {
    float:right;
    margin: 0 10px;
    border: 1px solid green;
    padding: 5px;
}
.inner {
    border: 1px solid red;
    display: block;
    overflow: hidden;
    padding: 5px;
}

我的小提琴

http://jsfiddle.net/HerrSerker/qBfbc/

我的形象

Answer 1

这是使用 JQuery 的解决方案

你可以看到这个工作小提琴 测试过： IE10、IE9、IE8、FireFox、Chrome、Safari

HTML：（我稍微改了一下）

<div class="wrap"><a href="#">
        <span class="right">
            Right
            <br />
            Right
            <br />
            Right
        </span>
        <span class="inner">Left: longword longerword evenlongerword longerword evenlongerword longword.
        </span>
    </a></div>

CSS：

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrap
{
    width: 350px;
    padding: 10px;
    border: 1px solid gold;
}

.wrap a
{
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid silver;
    padding: 5px;
}
.right
{
    float: right;
    border: 1px solid green;
    padding: 5px;
    margin-left: 10px;
}
.inner
{
    border: 1px solid red;
    display: block;
    overflow: hidden;
    padding: 5px;
}

查询：

$.fn.textwidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
};

$(document).ready(function () {
    $(".inner").width($(".inner").textwidth()+2);
});

编辑：更多的脚本来调整灰色容器正如可以在这个工作小提琴中看到的那样