CSS：多行内容浮动：最小宽度

Question

CSS：多行内容浮动：最小宽度

6

有没有可能让浮动元素具有多行内容但仍然占用最小宽度？

如果浮动元素没有设置宽度，则只要其内容只有一行，它们使用的宽度最少。但当其内容超过一行时，元素的宽度将为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/

我的图片

图片描述

- yunzen

如果代码不是100%宽，为什么会以那种方式分配单词而不是其他方式？ - Itay

@Itay 我也考虑过这个问题。也许有一种解决方法，不需要使用浮点数。 - yunzen

你对jQuery解决方案感兴趣吗？ - Itay

您是不是想把“right”类嵌套在“left”中呢？还是说这是一个错误？ - avrahamcool

主要问题是左浮动元素的内容不是多行文本，而是由浏览器换行的一行文本。因此，当浏览器换行文本时，它不会为包含文本的元素计算最小宽度，这将是一个极大的开销。所以据我所知，唯一的解决方案就是为您的元素设置固定宽度，或者接受浏览器使用所有可用空间。 - István Őri

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- avrahamcool · Accepted Answer

这是一个使用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;
}

JQuery：

$.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);
});

编辑: 需要更多的脚本来调整灰色容器，可以在这里查看工作演示。