天道酬勤,学无止境

css-multicolumn-layout

CSS 列和边距问题(CSS columns and margin issue)

问题 更新:适用于所有浏览器的最新代码位于此 JSFiddle - https://jsfiddle.net/webvitaly/yu00ugft/5/ 我正在尝试使用纯 CSS 方法制作响应式列。 我有一个问题,列有时在顶部有间隙/边距。 尝试探索的 JSFiddle 链接 - https://jsfiddle.net/webvitaly/yu00ugft/ 如何解决? CSS: .fx-columns { background: yellow; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .fx-columns-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .fx-columns-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .fx-columns .fx-column { -webkit-column-break-inside: avoid; break-inside

2022-01-16 03:46:21    分类:技术分享    css   css-multicolumn-layout

CSS columns and margin issue

Update: The latest code which works in all browsers is located in this JSFiddle - https://jsfiddle.net/webvitaly/yu00ugft/5/ I am trying to make responsive columns using pure CSS approach. I have an issue where columns sometimes have gap/margin at the top. JSFiddle link to try and explore - https://jsfiddle.net/webvitaly/yu00ugft/ How to solve it? CSS: .fx-columns { background: yellow; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .fx-columns-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3

2022-01-16 01:24:21    分类:问答    css   css-multicolumn-layout

使用列数,如果分辨率更小,您可以动态地从 3 列更改为 2 列吗?(With column-count, can you dynamically change from 3 to 2 columns if the resolution smaller?)

问题 我正在使用column-count属性来设置一个在三列上有多个 div 的页面,这在大屏幕上看起来很棒。 每个 div 都有一个固定的宽度,比如 500 像素(包含图像)。 然而,当在较小的屏幕上工作时,浏览器会尝试将原始 \three 列中的内容强制转换为两列。 当内容开始重叠时,是否有首选的最佳方法让内容转到两列? 回答1 如果您使用column-width属性,而不是column-count ,浏览器将根据需要自动调整列数以填充可用空间。 http://codepen.io/cimmanon/pen/CcGlE .foo { columns: 500px; // shorthand, prefixes may be necessary } 回答2 @media (max-width: 500px) { .your element selector here { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } }

2022-01-15 16:16:55    分类:技术分享    css   responsive-design   css-multicolumn-layout   column-count

With column-count, can you dynamically change from 3 to 2 columns if the resolution smaller?

I'm using the column-count property to set a page with multiple divs at three columns, which looks great on larger screens. Each div has a fixed width of, say, 500px (contained images). When working on smaller screens however, the browser tries to force the content within the original \three columns when it should go to two columns. Is there a preferred best method to have the content go to two columns when the content starts to overlap?

2022-01-15 13:55:11    分类:问答    css   responsive-design   css-multicolumn-layout   column-count

css列:最后一列未填充[重复](css columns: last column is not filled [duplicate])

问题 这个问题在这里已经有了答案: 不尊重 CSS 列数4 个答案 4年前关闭。 我正在尝试使用column-count css 属性在 4 列中呈现div 。 但是当列包装器中有 3n 个项目(3、6、9...)时,只有三列被填充,第四列是空的! CSS: .columns { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; } .item { display: inline-block; widtth: 100%; border: 1px solid red; } HTML: <div class="columns"> <div class="item">Lorem ipsum dolor sit amet 1</div><div class="item">Lorem ipsum dolor sit amet 2</div><div class="item">Lorem ipsum dolor sit amet 3</div> <div class="item">Lorem ipsum dolor sit amet 4</div><div class="item">Lorem ipsum dolor sit amet

2022-01-15 02:04:43    分类:技术分享    css   multiple-columns   css-multicolumn-layout

css columns: last column is not filled [duplicate]

This question already has answers here: CSS column-count not respected (4 answers) Closed 4 years ago. I am trying to use column-count css property to render divs in 4 columns. But when there are 3n items (3, 6, 9...) in columns wrapper, only three columns get filled, and fourth column is empty! CSS: .columns { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; } .item { display: inline-block; widtth: 100%; border: 1px solid red; } HTML: <div class="columns"> <div class="item">Lorem ipsum dolor sit amet 1</div><div class="item">Lorem ipsum

2022-01-08 21:51:07    分类:问答    css   multiple-columns   css-multicolumn-layout

如何创建变量列并填充它们?(How to create variable columns and fill them up?)

问题 我有一个我想要在彼此相邻的列中包含的项目列表。 我不知道会有多少项目,所以我不能有一个固定的高度。 我希望他们尽可能地填充空间,如下所示: #parent { background-color: firebrick; max-height: 200px; /* <-- eliminate */ display: flex; flex-flow: column wrap; } .child { background-color: #fff; height: 30px; width: 100px; margin: 10px; padding: 3px; } <div id="parent"> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> <div class="child">child</div> </div> 所以我基本上想要上面的但没有#parent的max-height ,但是当我删除它时

2021-12-24 00:29:23    分类:技术分享    css   css-multicolumn-layout

CSS3 多列布局 IE 解决方法 [关闭](CSS3 multi column layout IE workaround [closed])

问题 关闭。 此问题不符合 Stack Overflow 准则。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其成为 Stack Overflow 的主题。 4年前关闭。 改进这个问题 我今天偶然发现了一个非常棒的项目 (CSS3 PIE),它可以使用 CSS 设置和常用的 CSS3 符号在 IE6、IE7 和 IE8 中使用 CSS3 圆角、阴影和渐变。 它使用 *.htc 文件来进行诡计并使其对开发人员真正透明(就像设置它并忘记它 - 创建新页面或更改现有页面时没有额外的脚本调用(假设您不更改 CSS))。 我想知道是否有类似的多列布局可以使用。 浮动不是一种选择,因为内容不是从上到下——从左到右,而是从左到右——从上到下...... 有人为 CSS3 多列布局开发类似的东西吗? 回答1 也许是 Columnizer jQuery 插件? 不幸的是,它不会像 CSS3 PIE 那样解析您的样式表并查找相关属性(一个非常方便的功能)。 CSS3 PIE 和该插件都依赖于 JavaScript。 回答2 应按列顺序排列的列表的另一种解决方案(如在电话簿中) 我问这个问题主要是因为我必须显示大约 1000 个用户的列表。 这种列表很长,涉及大量滚动。 所以我需要一个解决方案将这些用户放在列中,这样他们也可以从左到右逐列从上到下流动。 CSS3 多列布局正是我所需要的

2021-12-23 14:56:17    分类:技术分享    css   internet-explorer   layout   css-multicolumn-layout

CSS3 multi column layout IE workaround [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 4 years ago. Improve this question I've stumbled across a really great project (CSS3 PIE) today that makes it possible to use CSS3 rounded corners, shadows and gradients even in IE6, IE7 and IE8 using CSS settings and usual CSS3 notation. It uses *.htc file that does the trickery and makes it really transparent for developers (as in set it and forget it - no additional script calls when creating new

2021-12-10 18:30:12    分类:问答    css   internet-explorer   layout   css-multicolumn-layout

定位第 n 列(由 column-count 制作)(Targeting nth column (made by column-count))

问题 假设我有这个 <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> ul { column-count: 2; } 我想将第一列向右对齐,第二列向左对齐,有没有办法使用 css 选择器来定位其中一列? 回答1 截至目前,无法使用纯 css 定位第 n 列。 回答2 您可以使用 column-gap 来做您想做的事情,但由于不能使用calc(100% - liWidth * colCount)作为column-count的值,您现在必须使用一些 javascript function calcGap() { var gap = window.innerWidth - (columnCount * listWidth) + "px"; ul.style.webkitColumnGap = gap; ul.style.columnGap = gap; } calcGap(); // Fire on load window.onresize = calcGap; // Fire on window resize 演示 使用此方法,您可以拥有所需的任何text-align ,并且不会弄乱其他对齐属性 回答3 不清楚是要对齐整列还是对齐里面的元素。

2021-12-10 14:40:44    分类:技术分享    css   css-multicolumn-layout