确保垂直内容水平溢出

TL; DR：尝试水平溢出垂直块，类似于Windows“metro”接口。彩色块应保持垂直对齐，除非它们不适合，在这种情况下，它们应该溢出到一个新的列中（块的布局将水平增加，因为垂直尺寸减小）。确保垂直内容水平溢出

目前，我已经创建了一个显示以下内容的HTML页面：

Initial HTML

这里面的标记，在下列因素出现：

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    <div class="four"></div> 
</div>

我试图定义CSS规则是这样的，当“容器”div被调整大小时，彩色块会水平溢出，如下图所示：

Result of CSS

这是可能的使用纯CSS/SCSS？我需要使用JavaScript还是动态创建新元素？

我已经尝试使用以下SASS规则来显示这样的布局，但无济于事：https://gist.github.com/psgs/cd87a1b3e70b35e264ec

非常感谢，
PSGS

来源

2015-06-11 psgs

我删除了我的答案，我不知道如何用CSS做这件事，但是你可以定义用javascript来做，CSS解决方案当然是最好的。 –

好的。谢谢你的时间克里斯托弗：D – psgs

如果你的块向左浮动（float:left），然后作为你增加div的宽度，块应该自动地向右移动，或者如你所说，应该水平地溢出。

来源

2015-06-11 09:49:53

嗨Rupesh，谢谢你的回答。不幸的是，这不是我想要达到的。如果可能的话，彩色块应保持垂直对齐，除非它们不适合，在这种情况下，它们应溢出到新的色谱柱中。正如@ christopher-karlsson所说，随着垂直尺寸的减小，块的布局将水平增加。 – psgs

确保垂直内容水平溢出

回答

相关问题