Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
                        
                        6年前关闭。
                                                                                            
                
        
有几个浮动div,例如:http://jsfiddle.net/YyKxB/
如何使最后一个div.verylast填充剩余空间?当然,此空间的宽度将根据div在实际窗口宽度中排列的行数和列数而变化。

没有JS怎么办?

最佳答案

也许与flex完美匹配,但我只对每个项目使用固定宽度的“关闭”:

body > div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

body > div > div {
    -webkit-flex-basis: 200px;
    border-top: 1px solid black;
    margin: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 0;
    flex-grow: 0;
}

.verylast {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}


Here is the Fiddle.

问题是,我不知道如何防止最后一项增长到容器的整个宽度,该宽度大于列的总和。抱歉,也许其他人有一个主意。

如果您可以使用灵活的宽度,它确实可以工作,但是我想那不是您想要的。只需查看this Fiddle

但是,请注意,这是全新的,browser support根本不好。



因为似乎还没有一个完美的解决方案(仅CSS),所以我尝试朝一个错误的方向发展:也许您的情况允许使用媒体查询:

/* ... other media queries for all the other widths */

@media screen and (max-width: 629px) {
    body > div {
        width: 420px;
    }
}

@media screen and (max-width: 419px) {
    body > div {
        width: 210px;
    }
}


Here is a demo.正如我所说:我知道它很hacky,但是如果没有其他人可以提供一个干净的解决方案,也许hacky没问题。 ;-)

浏览器兼容性:媒体查询具有better support,对于旧IE也有一个备用。

10-05 21:06
查看更多