标签: css-multicolumn-layout

基本上,我不明白为什么这样做:

.grid {
  display: grid;
  grid-template-columns: repeat(4, min-content);
}

但这不起作用:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, min-content);
}

我真的希望使后一种功能成为可能.还有其他方法可以使它工作吗？

我有以下要求来设计打印布局以生成 pdf，我尝试了各种选项，包括 CSS flex 和 grid，但没有太大成功。

要求是：

• 以 3 页列式布局显示内容 - 类似于报纸风格。
• 如果一列包含太多信息，那么它会“流入”右侧的下一列。
• 一旦我们达到 3 列的限制，那么第 4 列应该移动到下一行而不是该列（如下一页）。此外，我们不知道总共有多少列或行。

我能够达到第一个要求。但是，我找不到根据 div 宽度（或页面宽度）打破 CSS 中第三列的方法。

我正在尝试以下代码：

.newspaper {
  max-height: 500px;
   column-count: 3; 
  
}
.article {
  break-inside: avoid;
  page-break-after: always;        
}
.chart {
  background: #ccc;
  height: 200px;
}

 <div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad …

我正在使用该column-count属性设置一个包含三列多个div的页面,这在较大的屏幕上看起来很棒.每个div的固定宽度为500px(包含图像).

但是,当在较小的屏幕上工作时,浏览器会尝试强制原始\三列中的内容进入两列.当内容开始重叠时,是否有一个首选的方法让内容转到两列？

我有一个基于 CSS 的 2 列布局...

.mainContentSection {
  font-size: 1.1em;
  margin: 20px 10px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}

.mainContentSection p {
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

有时，第二列的顶部会抓住前一段底部的边距。这会推下下一段的顶部，如附图所示。我尝试过打破内部、改变边距、内联块。所有这些都取得了一些成功，但并非最佳。我可以访问第二列来删除该边距吗？

关于CSS列布局,我遇到了一个非常奇怪的行为,它只出现在Chrome中.

根据被列化的项目的总高度,其左偏移被移位,这使得难以确定项目的实际位置.渲染看起来很好,但如果你检查元素,你实际上可以看到它被相当多的偏移.

这是一个例子:https://jsfiddle.net/vx8h8u46/

检查.panel元素,你会发现它的边界矩形不会从左边开始.

如果单击按钮删除一个项目,那么突然之间的边界矩形是正确的.

当面板的高度超过某个阈值时,似乎会发生这种情况,但此时只是猜测.有工作吗？

function logOffset() {
  document.getElementById("log").innerText = document.querySelector(".panel").getBoundingClientRect().left;
}

window.removeLastItem = function() {
  var items = document.querySelectorAll(".item");
  if (items.length) {
    items[items.length - 1].remove();
    logOffset();
  }
}

logOffset();

* {
  box-sizing: border-box;
}

.item {
  display: inline-block;
  width: 160px;
  height: 80px;
  outline: 1px solid red;
}

.container {
  -moz-column-width: 320px;
  column-width: 320px;
  -moz-column-fill: auto;
  column-fill: auto;
  max-height: 160px;
  width: 640px;
}

<div class="container">
  <div class="panel">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div …

我有一个列表,我想从中构建两列.列表中可以包含可变数量的项目,但最大值.8

我总是希望第一列有4个元素.我已经尝试column-count: 2但是这对于不均匀的数字不起作用,因为第一行必须包含4个元素.

.container {
  border: 1px solid red;
  width: 300px;
  height: 90px;
}

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

我需要从上到下，然后从左到右订购商品，例如：

1 5
2 6
3 7
4 8

但是，框阴影已被切断。请参考代码段：在底部截去项目3的框阴影，在顶部截取项目4的阴影（镀铬）。

对此也有类似的问题，但是在这种情况下答案不适用。我不能在容器上使用flex，flex-direction: column因为这需要显式的高度，并且item计数是动态的。我也无法将项目设置display: inline-block为其他答案所建议的，因为我需要使用flex控制此内容。

1 5
2 6
3 7
4 8

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
}

我从无法解决的其他类似问题中尝试了另外两件事：设置overflow: …

我正在尝试实施一个超级菜单.

菜单项的数量是可变的.默认情况下,它们必须以4列呈现,平衡(每列上的项目数应与其他列几乎相同).根据其内容,巨型菜单的高度也是可变的.

我用CSS多列布局实现了它.

这个代码是:

.menu {
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
 -webkit-column-gap: 32px;
    -moz-column-gap: 32px;
         column-gap: 32px;
}

我的问题是有一个特殊的菜单项类型,它应该作为一个列中断.此菜单项类型是可选的,但如果存在,则应强制浏览器启动新列以显示内容(最多可以有3个列中断).

我添加了以下css代码:

.menu-item--column-break {
    display: block;
    -webkit-column-break-before: column;
              -moz-break-before: column;
                   break-before: column;
}

但是这个CSS仅适用于Chrome:

Firefox和Safari不支持"column-break"元素的CSS规则,并将其显示为普通菜单项:

该菜单是在JavaScript中从JSON对象生成的,HTML可以更改,但我更喜欢CSS/JS-only解决方案.

您是否知道如何在所有浏览器中实现此功能？

这是完整的代码:

https://codepen.io/andreivictor/pen/ywLJKx

要么

let items = [
  {title: 'Category 1', type: 'menu-item'},
  {title: 'Category 2', type: 'menu-item'},
  {title: '---cb---', type: 'column-break'},
  {title: 'Category 3', type: 'menu-item'},
  {title: 'Category 4', type: 'menu-item'},
  {title: 'Category 5', type: 'menu-item'},
  {title: 'Category …

我正在尝试column-count在带有多个段落的标记上使用css3属性.在Webkit浏览器上,我看到了什么似乎是一个bug.在某些屏幕尺寸下,段落边距无法很好地分割各列.

这是一个屏幕截图(请注意,以"Duis"开头的第三段落下,而它应该与屏幕顶部齐平):

这是问题的CodePen.我已将宽度修正为1000px,因此Chrome*/Safari用户的问题显而易见.

*编辑:刚刚在2018年初检查,Chrome不再受此错误的影响.Safari(测试11.0.3)可以!

我试图使用page-break-*规则来强制段落以避免中断.我也尝试-webkit-perspective:1按照http://caniuse.com/#feat=multicolumn上的评论使用,但这没有任何效果.

有什么想法吗？

article {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  width: 1000px;
}

p {
  margin-top: 0;
  margin-bottom: 1.3em;
}

<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed do eiusmod tempor incididunt ut labore …

我正在尝试使用column-countcss 属性div在 4 列中呈现s。

但是当列包装器中有 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 5</div><div class="item">Lorem ipsum dolor sit amet …