Question

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

我目前正在尝试将语义用户界面card views与CSS columns一起使用，而不是用cards类来避免此问题。

问题在于，Chrome似乎将卡元素拆分为列中的各个位置，而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和Blink的浏览器确实具有相同的支持非标准的-webkit-column-break- *属性来实现同样的目的结果（但只有auto和always值）

<强>更新

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

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

1 个答案: