CSS多列布局防止在高度更改时移动列

文章/答案/技术大牛

发布

1回答

html、css、css-multicolumn-layout

当我们改变列的高度时，如何防止列移动。Look JSFiddle，尝试点击3列中的链接查看：在桌面上，我们需要这样：2 42 5没有找到使用flex/float/inline-block的解决方案，所以使用了多<e

浏览 4提问于2017-08-01得票数 2

2回答

CSS列和相等内容

css

我想在我的网站周围使用CSS3专栏，因为它在宽页面上为用户提供了更好的用户体验。但是，如果我使用CSS3列，有时左边的列是满的(假设有20行文本)，而右边只有have2行的文本。我能用纯css3 (也许是Flexbox)让它有相同数量的内容吗？或者我需要JS来解决这个问题？请注意，我不是在谈论相同的高度，而是相同数量的内容:)

浏览 0提问于2014-09-22得票数 1

2回答

继续滚动不同行数的焦点样式CSS柔性盒多列。

html、css、scroll、flexbox、focus

我正在构建一个具有可变列数的布局，每个列都有一个独立的行数。用户必须只能水平滚动板，并且只能垂直滚动列:我希望滚动当前的focused列，并防止在整个板的对角线方向上滚动。当用户到达列的末尾而不是母板时，在列上的垂直滚动必须结束(如果有其他列高于焦点列，则板的高度可能更长

浏览 1提问于2020-08-13得票数 0

回答已采纳

1回答

CSS3多列和可变高度内容问题

html、css、firefox、css-multicolumn-layout

我目前正在开发一个原型，它使用CSS3多列来划分内容，它似乎工作得很好。我的问题是，作为列的一部分的块的内部有一个扩展的高度部分，那么，在火狐中，当CSS3多列中的元素的高度发生变化时，它就会消失，然后火狐崩溃。[DIV] [CONTENT] - Default h

浏览 0提问于2012-03-05得票数 1

回答已采纳

1回答

第4列在指定列数为3时显示。

css、column-count、css-multicolumn-layout

我试图利用css的“列计数”与CSS填充相结合，并且我注意到，如果我指定一个列数为3，如果内容不合适，浏览器将呈现第四列的一部分。如下所示这里是一个JSFidle -> 谢谢你的好意下面的CSS。

浏览 2提问于2016-10-07得票数 3

回答已采纳

1回答

移动友好CSS多列布局，将内容限制为特定列

android、html、css、flexbox

我实现了一个flex多列布局。它在我的桌面上看上去很棒。在移动设备上，它都被卷在一起，完全忽略宽度参数。我试着使用列，但是文本会自己扩展到下一列，这对我来说是不适用的(注意：“调试”字符串的位置，它将自己抛到第三列，在中非常清楚，我在第一列中定义了它，在关闭的</div>中) 什么是适合移动设备的CSS多<

浏览 2提问于2015-06-22得票数 0

回答已采纳

1回答

具有不同列高度的多列布局

css、css-multicolumn-layout

对于可打印的布局，我想显示一个动态列表(来自一个数组)，它应该‘流’过4列不同高度的列，如下所示：我如何使用CSS来实现这一点？我查看了css中的多列，但列的高度必须相同，所以我猜这是不起作用的。做这件事最好的方法是什么？如果它只在当前的web浏览器中工作，那就好了。

浏览 11提问于2020-05-18得票数 0

3回答

不可能的html布局？

html、css、tablelayout

我试图创建一个类似于下面所示的页面布局(CSS只支持Chrome，Firefox，IE8+)| |_____4_____|| 1 | 2 | 3 ||___|_______|___| 我在实现这个跨浏览器时遇到了麻烦我的尝试：我创建了一个简化的示例来展示我使用表(

浏览 2提问于2014-04-17得票数 0

回答已采纳

1回答

引导程序:更改桌面布局中列布局的顺序

css、twitter-bootstrap、twitter-bootstrap-3

流动的第一个布局将分别在第3、第9和第3行中有三列(我知道总共有12列，请阅读完整的问题)。在移动设备中[9]但在桌面设备中，我希望有一个布局，如 [3]我目前正在用JS来完成这个任务，但是我希望用CSS来解决这个问题，因为它会更轻。 @Catalin Munteanu的解决方案有一定的局限性。如果列-2的<

浏览 0提问于2014-05-25得票数 0

回答已采纳

1回答

CSS列布局-重新订购移动项目

html、css

这就是我想要达到的目标：2具有可变高度项的列布局。1列的固定宽度为400 up，另一列填充其余的宽度。移动任何一个布局本身是很容易做到的。但我不知道如何把这两种布局结合起来。棘手的部分是重新排序的项目，我认为。这有可能仅用CSS吗？

浏览 2提问于2017-11-04得票数 2

1回答

为CSS选择尺寸标准；百分比与像素

css、cross-browser、positioning、css-float

客户要求设计媒体网站，并强调布局应在台式机、笔记本电脑和平板电脑上保持一致(移动设备将使用不同的布局)。他们想要一个两列的布局，其中的列滚动彼此独立。以下是一些问题：2)是否有浏览器或设备无法识别百分比元素大小？4)下面的CSS实现了我在用于测试的Mac上的Chrome、Firefox和Safari中寻找的东西。是否有任何浏览器或设备<

浏览 1提问于2012-03-06得票数 2

回答已采纳

1回答

如何使用jQuery在媒体查询中最小化列的高度？

jquery、html、css、wordpress

我正致力于将整个网站的多列高度降到最低。这些列在媒体查询中有一个锁定的高度，当我更改高度时，它们会失去移动响应能力。这些列的布局中有如此多的空白，所以我想将其修正为台式机和膝上型计算机(分别为10px和@media 1022 px )，以及平板电脑和智能手机的300px (分别为@media 481px和@media我听说过使用jQuery，我想知道如何使用这种编码语言使列变小而不

浏览 2提问于2017-05-15得票数 0

回答已采纳

2回答

Flexbox:带有列包装的可变/动态高度项

css、twitter-bootstrap、bootstrap-4、flexbox

我正在努力创建一个动态布局，这是不同的移动和桌面。项目应该根据屏幕的宽度进行不同的排序，并且布局应该改变。以下是主要目标，左边的布局是为移动的，右边的是桌面：蓝色，紫色和黄色的含量可以改变，所以高度是可调的。紫色和黄色块必须始终位于桌面上的灰色+蓝色块的一侧。现在，我只对3列使用它，但是在所有列上都重复了“动态”高度：我设法让它与浮子一起工作，但是列彼此对齐。还固

浏览 0提问于2019-10-09得票数 0

回答已采纳

1回答

只使用css3的pinterest样式图像布局(包括无限滚动)

css

这意味着图像的宽度应该在100 be到200 be之间，并且列的数量应该相应地适合。新图像必须添加到底部。

浏览 4提问于2014-03-20得票数 0

回答已采纳

3回答

屏幕上的分页符(css多列布局)

html、css

我想在HTML中显示一个多列文档。在分页符之后，在打印中重新启动多列“框”。我想在屏幕上模拟这种行为(分页符)，因此列的高度不应该高于用户代理窗口的高度。我知道今天的JS有能力做到这一点，但我想使用CSS，因为这是一个布局问题。

浏览 2提问于2012-09-08得票数 6

2回答

CSS:多列，多页布局，就像一本打开的书。

html、css、css-multicolumn-layout

是否可以使用HTML和CSS创建两列多页布局，如本模型所示，其中内容自动来自1→2→3→4→…。？我正在构建一个eBook阅读器/作者。基本上，布局类似于桌面文字处理应用程序，如word或Pages：文本自动从一个页面流到下一个我试验了CSS多列布局模块。获得两列是直接向前，但我不

浏览 2提问于2020-03-05得票数 7

3回答

如何在CSS中给出div的完全高度

css、height

我这里有一个有两列的测试地点，都是绝对定位的。我怎样才能给两个div 100%的完全高度？(已经为正确的div尝试了bottom: 0;。是行不通的。注意： .wra

浏览 2提问于2012-03-29得票数 1

回答已采纳

1回答

哪个网站文章列表的可读性更好？平铺卡片视图还是列出的紧凑视图？

user-interface、user-experience

所以，我想为我的学校网站创建一个UI设计，有一篇文章/学校新闻网页的一部分，我有点困惑在平铺卡片视图和列表紧凑视图之间使用？单列布局-列表视图

浏览 1提问于2017-09-23得票数 1

1回答

在管理仪表板上并排显示自定义分类法

custom-taxonomy、admin、user-interface

从两个角度来看，我可以很容易地看到，我有足够的空间来容纳至少3或4 CT的浮动在彼此旁边。然而，当我转到2-col视图时，当前的UI只允许我将一个标签框拖到post内容编辑器下面。所以，在两种观点下，我不能做我想做的事。将标签框拖到post编辑器下面是没有意义的，因为它太长了。是否有可能使标签框在彼此旁边浮动？所以，空间越大，CT的并行显示就越多。

浏览 0提问于2012-06-11得票数 -1

3回答