0

我想知道如何在一个 div 中有多个跨度，最后一个跨度浮动到右下角并占据“行”中的所有剩余宽度。

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

它应该是这样的：

好的

这是它看起来不应该的样子：

坏的

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;
}
4

5 回答 5

1

如果你打开使用 flexbox，它可以很容易地完成（WebKit 演示）：

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

.container > :last-child {
    flex: 1; /* absorb remaining space */
}
于 2013-06-21T11:29:09.510 回答
0

简单的 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;
}
于 2013-06-21T13:34:40.580 回答
0

对于这个问题，您可以考虑使用 JavaScript/jQuery 辅助解决方案。在更一般的情况下，有 jQuery 包，如 David DeSandro 的 Masonry 或 Packery 或 Isotope：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属性中获取最小宽度。

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

其他的建议

弹性盒解决方案更加优雅。但是，最好有一些选择。

于 2013-06-21T11:03:00.570 回答
0

检查这个，

使用position: relative;容器和容器position: absolute;， .itemFullWidth你可以让它在一定程度上工作。我猜你需要一些js。

于 2013-06-21T11:05:10.103 回答
0

试试看，请查看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();   
});
于 2013-06-21T18:36:09.683 回答