CSS 列将 Chrome 中的元素分开，即使使用 break-inside:avoid;

Question

Flexbox 的一个问题是整行的高度会发生变化以匹配其中最大的元素，因此无法实现 Masonry 类型的布局。

我目前正在尝试使用语义 UI 的 card views together with CSS columns 而不是他们的 cards class 来避免这个问题。

问题是 Chrome 似乎将 card 元素分解到列中的不同位置，而 Firefox 可以很好地呈现它。 break-inside CSS 属性似乎是为了解决这个问题，但它似乎在 Chrome.

中不起作用

body {
    padding: 10px;
    width: 100%
}

.container {
    padding: 15px;
    -moz-column-count: 5;
    -moz-column-gap: 10px;
    -webkit-column-count: 5;
    -webkit-column-gap: 10px;
    column-count: 5;
    column-gap: 10px;
    width: 100%;
}

.container > .card {
    width: 90% !important;
    display: inline-block !important;
    margin-top: 0px !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid-column !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<div class="container">
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
 <div class="ui card">
  <div class="image">
   <img src="http://via.placeholder.com/150x150">
  </div>
  <div class="content">
   <a class="header">Kristy</a>
   <div class="meta">
    <span class="date">Joined in 2013</span>
   </div>
   <div class="description">
    Kristy is an art director living in New York.
   </div>
  </div>
  <div class="extra content">
   <a>
    <i class="user icon"></i> 22 Friends
   </a>
  </div>
 </div>
</div>

A CodePen with the example code

正如您在下面的屏幕截图中所看到的，卡片的内容飞回到上一列，而图像则留在应有的位置。

Screenshot of Chrome full page render

Screenshot of Chrome windowed render

Screenshot of Firefox full page render

Answer 1

这是由于缺乏支持。来自 caniuse.com:

WebKit- and Blink-based browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values)

更新

这意味着 -webkit-column-break-inside: avoid; 在基于 WebKit 和 Blink 的浏览器中不受支持，例如 Chrome（因为它是基于 WebKit 的）。

CSS 列将 Chrome 中的元素分开，即使使用 break-inside:avoid;

CSS columns break elements apart in Chrome even with break-inside:avoid;

html

css

google-chrome

semantic-ui

css-multicolumn-layout