Closed. This question is off-topic。它当前不接受答案。
想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
6年前关闭。
有几个浮动
如何使最后一个
没有JS怎么办?
Here is the Fiddle.
问题是,我不知道如何防止最后一项增长到容器的整个宽度,该宽度大于列的总和。抱歉,也许其他人有一个主意。
如果您可以使用灵活的宽度,它确实可以工作,但是我想那不是您想要的。只需查看this Fiddle。
但是,请注意,这是全新的,browser support根本不好。
因为似乎还没有一个完美的解决方案(仅CSS),所以我尝试朝一个错误的方向发展:也许您的情况允许使用媒体查询:
Here is a demo.正如我所说:我知道它很hacky,但是如果没有其他人可以提供一个干净的解决方案,也许hacky没问题。 ;-)
浏览器兼容性:媒体查询具有better support,对于旧IE也有一个备用。
想改善这个问题吗? 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也有一个备用。