Question

我想知道如何在div内部有多个跨距，最后一个跨度向右浮动并将所有剩余宽度放在“行”中。

这是一个小提琴：http://jsfiddle.net/gpakL/ 问题是，fullWidth跨度并不总是在底部。您可以调整浏览器窗口的大小以查看fullWidth跨度移动。

这应该是这样的：

good

这就是它看起来不像的样子：

bad

HTML：

<div class="container">
    <span class="item">sdfdsfsdf</span>
    <span class="item">sdfsdfsdfsdf</span>
    <span class="item">dsfdsfdsfsd</span>
    <span class="item">fsdfsdfsdffsdf</span>
    <span class="item">dsgsdf</span>
    <span class="item">dfd</span>
    <span class="item">fdfdf</span>
    <span class="itemFullWidth">FullWidth</span>
</div>

CSS：

.container {
    background-color: blue;
    width: 50%;
}
.item {
    float: left;
    background-color: orange;

    height: 30px;
    line-height: 30px; /* Vertically center */
    margin: 5px;
}

.itemFullWidth {
    background-color:green;
    display: block;
    overflow: hidden;

    height: 30px;
    line-height: 30px; /* Vertically center */
    margin: 5px;

    min-width: 80px;
}

Answer 1

如果您打开使用flexbox，可以轻松完成(WebKit demo)：

.container {
    display: flex;
    flex-wrap: wrap; /* allow multiple rows */
}

.container > :last-child {
    flex: 1; /* absorb remaining space */
}

Answer 2

您可以考虑针对此问题的JavaScript / jQuery辅助解决方案。在更一般的情况下，有像David DeSandro的Masonry或Packery或Isotope这样的jQuery包：http://desandro.com/

这是我使用jQuery如何做到这一点的版本。

function resetEndItemWidth() {
    var wContainer = $(".container").width();

    var minWidthEndItem = parseInt($(".itemFullWidth").css("min-width"));

    var endItemMargins =  $(".itemFullWidth").outerWidth(true) 
                            - $(".itemFullWidth").outerWidth();

    var prevItemOffset = $(".itemFullWidth").prev().offset();
    var prevItemWidth = $(".itemFullWidth").prev().outerWidth(true);

    var freeWidth = wContainer - (prevItemWidth + prevItemOffset.left);
    if (freeWidth < minWidthEndItem) {
        newWidth = wContainer - endItemMargins;
    } else {
        newWidth = Math.max(minWidthEndItem,freeWidth);
    }

    $(".itemFullWidth").width(newWidth);
}

resetEndItemWidth();

$(window).resize(function(){resetEndItemWidth();});

请参阅演示：http://jsfiddle.net/audetwebdesign/m6bx8/

如何运作

我在最后一个项目（.itemFullWidth）之前查看浮动的兄弟姐妹，并确定线路上剩余的可用空间量。

如果有足够的可用空间，我会重置整个宽度项目的宽度以填补空白，否则，全宽度项目在一个单独的行上，我将其设置为父容器的宽度。

对于全宽项目（.endItemMargins），您需要考虑左右边距，并且需要从min-width属性获取最小宽度。

如果使用全宽项目初始化原始文件，则可以放宽最小宽度要求。

其他评论

灵活盒解决方案更加优雅。但是，有一些选择是好的。

Answer 3

检查this，

将position: relative;用于容器，将position: absolute;用于容器 .itemFullWidth，您可以在某种程度上使其发挥作用。我猜你需要一些js。

Answer 4

简单的jQuery解决方案，但CSS解决方案应优先于JS解决方案。

http://jsfiddle.net/A8mSu/

HTML：

<div class="container clearfix">
 <span class="item">sdfdsfsdf</span>
 <span class="item">sdfsdfsdfsdf</span>
 <span class="item">dsfdsfdsfsd</span>
 <span class="item">fsdfsdfsdffsdf</span>
 <span class="item">dsgsdf</span>
 <span class="item">dfd</span>
 <span class="item">fdfdf</span>
 <span class="item itemFullWidth">FullWidth</span>
</div>

JS：

function setWidth()
{
    $obj = $('.container .itemFullWidth');
    $obj.width('auto').width($obj.parent().width() - $obj.position().left);
}

$(window).resize(setWidth);
$(document).ready(setWidth);

CSS：

.container {
    background-color: blue;
    width: 50%;
}
.item {
    float: left;
    background-color: orange;

    height: 30px;
    line-height: 30px; /* Vertically center */
    margin: 5px;
}
.itemFullWidth {
    background-color: green;
    min-width: 80px;
    margin-right: 0;
}
.clearfix:after {
    content:"";
    display: table;
    clear: both;
}

Answer 5

尝试，请结帐http://jsfiddle.net/gpakL/14/

function findWidth (){
var ConWidth = $('.container').width();
var leftWidth = $('.container .item:last').offset().left
var lastItemWidth = $('.container .item:last').width();
var fixPos = ConWidth - (leftWidth + lastItemWidth)

$('.container .itemFullWidth').width(  fixPos -20  );
};

$(document).ready(function(){
findWidth();
});

$(window).resize(function(){
    findWidth();   
});

全宽跨度向右浮动

5 个答案: