标签: css-multicolumn-layout

我正在尝试创建图像的砌体网格，总体思路是使用列计数来实现此示例。

我有三列，其中有一堆图像，CSS 和 HTML 与链接中的相同。问题是列无法正确对齐。最右边的一列通常比其他列短得多。显然，除非图像大小相同，否则列永远不会完美对齐，但差异远大于此。有时，前两列各容纳十个图像，但第三列仅容纳两个（图像大小相似），这意味着您可以轻松地将一些图像从第一列和第二列移动到第三列以获得更好的对齐效果。这个结果似乎违背了列计数的想法。

如果您将某些图像更改为更小的图像，上面的链接也会发生这种情况。是否只是列计数仍然存在错误且不应该使用，或者是否有一些技巧可以阻止这种情况发生？

编辑：这是基本的CSS（减去许多基本样式，例如过渡和其他内容，我试图将其删除以查看它们是否是罪魁祸首）。

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 4;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
}

这是一个显示问题的 JSFiddle。有四列，但在 Chrome …

我正在使用column-count和-webkit-column-count创建布局,但我发现了一个多次出现的问题.

正如你从这张图片中看到的那样,Chrome 45(没有在FF中发生)打破了元素的边界,这非常奇怪且非常烦人.这有点突破发生的代码(但我不知道为什么它不会发生在这里,只有区别是字体,并且没有Mayers css重置):

body {
  line-height: 1.5;
}
form {
  -webkit-column-count: 2;
  column-count: 2;
}
label {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-top: 0.625em;
}
input {
  border: 1px solid green;
  border-radius: 4px;
  padding: 0.25em 0.5em;
}
label>span:first-child {
  width: 5em;
  display: inline-block;
}

<h2>CONFIG:</h2>
<form id="pop_values" action="" class="ng-pristine ng-valid">
  <label>
    <input type="checkbox">
    <span>Mobile</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Animate</span>
  </label>
  <label>
    <span>Frecuency:</span>
    <input type="number">
  </label>
  <label>
    <span>Exclusions:</span>
    <input type="text">
  </label>
</form>

但它没有用.你能给予任何启示吗？

我有一个使用HTML和CSS的2列布局。在这些列中，我有一个选择菜单，将在单击这些列表项之一时显示。我需要相对于单击的项目放置此选择菜单，而不要像传统的选择选项菜单一样影响其周围元素的布局。但是，我不能使用传统选择，因为这是自动建议的输入/菜单。因此，我正在相对放置的父项中为菜单容器使用绝对放置的项。

我想要的是：

我的问题是，绝对定位的项目就像列中的一部分一样在破裂。这违背了我所了解的一切position: absolute，但似乎符合规范。更令人沮丧的是，浏览器会按我的意图显示绝对定位的项目（只要我没有position: relative在父对象上设置），但是我需要position: relative在父对象或选择菜单上设置（作为绝对定位的项目）不会总是显示与其相应元素相邻的元素。

我得到的是：

我还尝试了使用flexbox进行类似列的布局，但是，当我需要按顺序从上到下显示项目时，项目从左到右显示，就像在传统的列式布局中那样。我可以将flexbox与一起使用flex-flow: column wrap，但这将要求我知道/设置容器元素的高度，而我不能这样做。CSS列无需设置高度即可很好地包装列表。

我认为最简单的解决方案是以某种方式伪造绝对定位或使flexbox在不显式设置容器高度的情况下按顺序（从上到下）显示项目。我都尝试了两次，都没有令人满意的结果。我愿意使用JavaScript解决方案，但我会尽力避免使用它，而仅使用CSS来解决。

.columns-two {
  column-count: 2;
  column-width: 300px;
  -moz-column-count: 2;
  -moz-column-width: 300px;
}
.parent {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  position: relative;
}
.highlight {
  background-color: #FFF8DC;
}
.absolute-element {
  width: 200px;
  position: absolute;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 15px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<ul class="columns-two">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li> …

我有一个项目列表(从CMS获取),其编号未知.我需要在大致相同数量的项目的两列中显示此列表.以下代码有效但我在下面解释为什么它有问题:

<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

ul {
  display: flex;
  flex-wrap: wrap;
}

如果物品的内容总是相同的高度,这一切都很好.但是当一个项目中的内容更长时,同一行中的同级项目将被强制扩展以匹配相同的高度.我不希望这样.我希望两列在项目高度方面完全独立.

单独使用CSS可能吗？

编辑:

这是一个揭露问题的JSfiddle:https://jsfiddle.net/g9p3m2dp/

我所拥有的是一个包含多个项目的双列布局:

.grid {
  column-count: 2;
}

.grid-item {
  break-inside: avoid;
  height: 50px;
  margin-bottom: 10px;
  background-color: green;
  text-align: center;
  line-height: 50px;
  color: white;
}

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

https://codepen.io/Deka87/pen/RgdLeZ

现在我需要能够仅使用CSS对列内的项重新排序(因此它们在不同的屏幕分辨率上的顺序不同),所以我认为我可以这样做:

.grid {
  display: flex;
  flex-direction: column;
  column-count: 2;
}
.grid-item:nth-child(1) {
  order: 5;
}

显然,这没有用,打破了2栏布局.有人试过解决这个问题吗？我有机会得到这个工作吗？

PS:同一行上的项目不应该具有相同的高度(在这种情况下我可以使用简单的浮点数).很抱歉没有在开头指定.

使用 column-count: 2 时，如果有溢出，我希望出现垂直滚动条，但会出现水平滚动条。如果没有列数，垂直滚动条就会出现，正如预期的那样。如何使用 column-count: 2 并显示垂直滚动条？

.searchCriteriaPanel {
    border-radius: 0 0 5px 5px;
    width: 300px;
    height: 200px;
    background-color: lightgrey;
    padding: 10px;
    overflow-y: auto;
    column-count: 2;
}

<div id="MarketContent" class="searchCriteriaPanel">
    <label><input type="checkbox">one</label><br />
    <label><input type="checkbox">two</label><br />
    <label><input type="checkbox">three</label><br />
    <label><input type="checkbox">four</label><br />
    <label><input type="checkbox">five</label><br />
    <label><input type="checkbox">six</label><br />
    <label><input type="checkbox">seven</label><br />
    <label><input type="checkbox">eight</label><br />
    <label><input type="checkbox">nine</label><br />
    <label><input type="checkbox">ten</label><br />
    <label><input type="checkbox">eleven</label><br />
    <label><input type="checkbox">twelve</label><br />
    <label><input type="checkbox">thirteen</label><br />
    <label><input type="checkbox">fourteen</label><br />
    <label><input type="checkbox">fifteen</label><br />
    <label><input type="checkbox">sixteen</label><br />
    <label><input type="checkbox">seventeen</label><br …

我有一个目录列表，它使用 CSS 列，但在 Chrome 和 Safari 中的行为有所不同。目录的每个部分都有一个包装器，将列表排列成两列。

我已经有了 CSS，所以 Chrome 会按照我想要的方式呈现它：

在 Safari 中，第二列中的第一项有时在其上方有明显的边距。

我可以通过添加display: inline-block;到列表元素来在 Safari 中修复此问题。这破坏了 Chrome 中的布局，因为只有两个项目的部分在第一列中列出了这两个项目。

片段：

ul {
	moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
  column-gap: 2em;
}

li {
   -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
	list-style-type:none;
	padding:10px;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

<h3>
A
</h3>
<ul>
  <li>Anna<p>Sometimes there is additional content</p></li>
    <li>Anya</li>
</ul>
<h3>
B
</h3>
<ul>
    <li>Bartolo <p>Sometimes there is additional content. The boxes are of variable size.</p></li>
    <li>Beatriz</li>
    <li>Benedicto</li>
  <li>Boggins</li>
</ul>

是否可以设置这个两列目录的样式，使其在所有浏览器中都能正确显示？

我正在创建一个页面流，该流将大量内容分解为向右堆叠的列，只要他们需要。换句话说，我正在尝试创建一个只能水平滚动的布局。使用 CSScolumns属性很容易做到这一点。我有一些标记，比如

<div class="document-flow">
  <p>Some text</p>
  <p>A lot more text</p>
  ...
</div>

和 CSS

.document-flow {
  box-sizing: border-box;
  padding: 5rem;
  height: 100vh;
  width: 100vw;

  columns: 25rem;
  column-fill: auto;
  column-gap: 3rem;
}

这基本上给出了我正在寻找的效果。有了足够的内容，我可以向右滚动以查看我的所有列。

但是，当我一直滚动到最后时，最后一列直接位于浏览器的右边缘。当然，来自容器的填充不适用，因为以这种方式布置的列构成溢出。它看起来不太好。

我希望它5rem在右边有相同的填充，但我还没有找到办法做到这一点。

我得到的最接近的是在流的末尾添加一个伪元素，它总是比列宽宽 5 rem。（我在 CodePen 中有这个布局的演示。）

.document-flow::after {
  content: '';
  display: inline-block;
  width: calc(100% + 5rem);
}

不幸的是，这似乎只适用于 Firefox。Chrome 和 Safari 只是简单地裁剪了这个更宽元素的额外宽度，而不让用户滚动查看它。

我已经考虑了如何这种类似的问题可能会帮助-通过添加一个内部padding-right到的所有直接孩子.document-flow。我宁愿不这样做，因为页尾间距不能大于列之间的间隙（因为填充也适用于中间列）。

column-fill: balance;应该“在列之间平均分配内容”。它似乎在 Firefox 和 Edge 中正常工作。但是 Chrome（和 Opera）似乎真的不喜欢第二列，将其大部分留空。

它似乎与元素的高度有关，但我无法弄清楚究竟如何。在第一个示例中，我希望第二个段落在第二列中，但 Chrome 将它们都放在左列中，而右一个为空。

第二个例子显示了一个不同的类似不平衡的例子。

    div {
        border: solid blue 3px;
        column-count: 2;
        column-fill: balance;
    }
    p {
        border: solid red 3px;
        break-inside: avoid;
    }
    .second { height: 100px; }

<div>
    <p>plain</p> 
    <p class=second>.second</p>
</div>

<hr>

<div>
    <p>plain</p> 
    <p>plain</p> 
    <p>plain</p> 
    <p class=second>.second</p>
    <p>plain</p> 
</div>

这是一个错误吗？我是否也错过了所有其他浏览器供应商所拥有的东西？

更重要的是，我怎样才能让这样的东西工作，甚至可能诉诸讨厌的黑客？

更新：显然，它不仅限于 2 列

是否可以使用 HTML 和 CSS 创建一个两列的多页布局，如本模型所示，其中内容自动从 1 流出？2 ? 3 ? 4 ? ……？

我正在构建一个电子书阅读器/编写器。本质上，布局类似于 Word 或 Pages 等桌面文字处理应用程序的布局：

• 两页彼此相邻填满屏幕（如果您打开一本书，则为“左”和“右”页）
• 下面接下来的两页，垂直滚动等（想象在书中翻页）
• 文本自动从一页流向下一页 1 ? 2 ? 3 ? 4 ? ...

我试验了 CSS 多列布局模块¹。获得两列是直接的，但我无法弄清楚如何在视口高度“分解”为多个“两列”布局，每组“左右”页面一个。

澄清：

内容基本上是一大块<div contenteditable="true">。它的内容需要自动跨页面流动。

<div id="bookeditor" contenteditable="true">
    Book contents go here...
    Wrap from page to page, from row to row...
</div>

1：https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts