gpt4 book ai didi

css - 溢出时如何发送 "right"上的元素?

转载 作者:太空宇宙 更新时间:2023-11-04 10:25:23 27 4
gpt4 key购买 nike

我想创建以下方案中解释的行为:

每当一个元素在屏幕之外时,我希望它被放置在一个新的列中,在右边。

enter image description here

目前,所有元素都在同一列中。

这是我的元素当前的显示方式:

  <style is="custom-style" include="iron-flex">
.flex-wrap {
@apply(--layout-wrap);
@apply(--layout-vertical);
}
</style>
<template>
<div class="container flex-wrap" >
<template is="dom-repeat" items="{{employeesArray}}">
<employee-element name="{{item.title}}"
preview="{{item.preview}}"
width={{item.width}} height={{item.height}}>
</employee-element>
</template>
</div>
</template>

如何强制元素放置在我绘制的位置?

最佳答案

这可以通过大多数较新的浏览器支持的列属性来完成:

.container {
height: 100px;
border: 1px solid black;
column-fill: auto;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-width: 150px;
-webkit-column-width: 150px;
-moz-column-width: 150px;
}

HTML:

<div class="container">
<div>employee #1</div>
<div>employee #2</div>
....
<div>employee #x</div>
</div>

查看此 jsfiddle .更多关于 CSS 列属性的信息,请参见 here .

关于css - 溢出时如何发送 "right"上的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36823490/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com