• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

确保垂直内容水平溢出

JavaScript 来源:psgs 5次浏览

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


===========解决方案如下:

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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)