确保垂直内容水平溢出

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

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

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

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

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

非常感谢，
PSGS

回答：

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

以上是 确保垂直内容水平溢出 的全部内容， 来源链接： utcz.com/qa/259576.html

回到顶部