代码之家 › 专栏 › 技术社区 › niklasfi Rahul Tripathi

不考虑列计数和列宽

column-count css-multicolumn-layout column-width css html

niklasfi Rahul Tripathi · 技术社区 · 8 年前

问题

column -属性在页面上创建列。我注意到布局引擎的一些奇怪行为。也就是说,我正在使用

body {
  padding: 0;
  background-color: black;
  margin: 0;

  column-width: 308px;
  column-gap: 0;
  column-rule: none;
  line-height: 0;
}

2400px

请注意最后一列中的大黑色空间。我的数学告诉我2400/308=7.79>7.2400px视窗宽度下预计有七列。然而,布局引擎只使用了六个。这种行为在chrome和firefox之间是一致的,甚至在更换浏览器时仍然存在 column-width: 308px 具有 column-count: 7

这个问题

我想知道是什么原因导致浏览器忽略了第7列的宽度正好如此。有没有办法避免这种行为?

代码

this fiddle

body {
  padding: 0;
  background-color: black;
  margin: 0;
  column-width: 308px;
  column-gap: 0;
  column-rule: none;
  line-height: 0;
}

img {
  margin: 12px;
  padding: 9px;
  border: 1px solid darkgrey;
  background-color: white;
  display: inline-block;
  width: 264px;
}

.w {
  height: 176px;
}

.h {
  height: 396px;
}

<img class="w">
<img class="w">
<img class="h">
<img class="w">
<img class="w">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="h">
<img class="w">
<img class="w">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

2 回复 | 直到 8 年前

Johannes 8 年前

几天前,我在这里回答了一个类似的问题: https://stackoverflow.com/a/46412808/5641669

然而,我想补充一点:

因此,将第四项放入第一行,以使所有项都可以放入由定义的列数中 column-count . 在本例中,这导致只有六列中包含项目,但其中有7列。

如前所述,整个容器的高度始终取决于第一列(即,如果高度不固定)。其余的列将仅根据该高度填充(它们不会比第一个高),而不是根据项目到其余列的均匀分布。因此,有时结果可能与您的情况类似,最后一列仍然为空。

elvirus 8 年前

如上所述,这种行为是预期的,因为列的工作方式。但是你可以解决这个问题,但是你必须在所有场景中测试它。特别是如果你有一个动态的项目数量。

@media screen and (min-width: 2400px) and (max-width: #something#) {
  body {
    column-gap: 100px; /* adjust to your needs */
  }
}

此解决方案并不能处理所有情况,但可以作为非常特定情况的解决方法。

也许你应该用另一种方式展示你的内容。。。也许你应该研究一下布局库,比如Masonry f.i。 https://masonry.desandro.com

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前