语义UI可堆叠网格 - 利用空白/动态获取可堆叠网格的真实宽度

Question

也许我让它变得比它需要的更复杂，也许它是不可能的，但是......理想情况下如果有空白空间我想利用它。

我使用语义UI可堆叠网格，如果我在下面的示例屏幕截图中使浏览器宽度稍微宽一点，那就发布了＆＃39; post＆＃39;会出现在右边，会有3列。完美！

我想知道是否有办法动态计算未使用的空间＆＃39;因此，如果它超过一定数量，我可以在该空间中显示一个小项目 如果用户随后使浏览器变得更宽，则右侧会显示另一个帖子以生成3列，并且小项目将消失。

正确方向上的一点是惊人的，我可以动态计算列数，因此可以计算出它们与窗口宽度相比的总宽度吗？你能想到实现这个目标的任何其他方式吗？

谢谢，Lezlea

我的网站正在进行beta测试：http://fishtag.world/

http://www.lezlea.co.uk/fishtag/todelete/whitespace.png

Answer 1

可堆叠网格应该保持您的列跨越可用空间，在较小的屏幕上它应该全部100％（https://jsfiddle.net/ryan_whitlie/2sLw5bon/），但是在您点击较小的屏幕尺寸之前，您的列似乎正在包装。您可能会对列应用一些余量？

为了实现您的要求，您最好将该部分分成2列，左边是75％的全宽，右边是25％。显示＆＃39;帖子＆＃39;在左侧，您的其他内容在右侧。然后，当屏幕大小达到一定大小时，隐藏右列并仅使用CSS媒体查询显示您的帖子：

@media(min-width: 600px) {
    .posts {
        width: 75%;
    }
    .aside {
        width: 25%;
        display: block;
    }
}

这将应用宽度并在宽度为600px或更高的任何屏幕/设备上显示（display: block;）两列。

在此处查看工作版本，随时更改600px值 https://jsfiddle.net/ryan_whitlie/cg9p3kuw/