CSS列在Chrome中将元素分开,即使是内部破坏:避免;

Question

Flexbox的一个问题是整行的高度变化以匹配其中的最大元素,因此无法实现砌体类型的布局.

我目前正在尝试将Semantic UI的card视图与CSS列而不是其cards类一起使用以避免此问题.

问题在于,Chrome似乎将卡片元素拆分为列中的各个位置,而Firefox将其渲染得很好.似乎break-insideCSS属性旨在解决此问题,但它似乎在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>

带示例代码的CodePen

正如您在下面的屏幕截图中看到的那样,当图像停留在应有的位置时,卡片的内容会飞回到上一列.

Chrome整页渲染的屏幕截图

Chrome窗口渲染的屏幕截图

Firefox整页渲染的屏幕截图

Answer 1

这是由于缺乏支持造成的。来自caniuse.com：

基于 WebKit 和 Blink 的浏览器确实对非标准 -webkit-column-break-* 属性具有同等支持，以实现相同的结果（但只有 auto 和always 值）

更新

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