カラムでの奇妙なCSSの動作

Question

下記の画像を参照してください。これはChromeにのみ表示されます（Edge、IE11、Firefoxもテスト済みです）。私はこれも画面サイズに基づいてランダムに発生することに気付きました。

section[role="notes"] 
    column-count: 3 
    column-width: 250px 
    column-gap: 10px 

article[role="note"] 
    break-inside: avoid 
    min-height: 150px 
    margin: 0px 
    margin-bottom: 10px 
    box-shadow: 0px 2px 2px gray 

この問題を解決することができ任意の回避策または多分いくつかのCSSプロパティがあります：ここで

はCodePenから私のsassコードのセクションです。

Answer 1

あなたは、ディスプレイを使用することがあります：インラインブロックを記事のためにそれらを避けるために、いくつかの列の上にスプレー：

(function() { 
 
    var colors = [ 
 
     '#99b433', // Light Green 
 
     //'#00a300', // Green 
 
     '#1e7145', // Dark Green 
 
     //'#ff0097', // Mangenta 
 
     //'#9f00a7', // Light Purple 
 
     '#7e3878', // Purple 
 
     '#603cba', // Dark Purple 
 
     //'#1d1d1d', // Darken 
 
     '#00aba9', // Team 
 
     //'#eff4ff', // Light Blue 
 
     '#2d89ef', // Blue 
 
     '#2b5797', // Dark Blue 
 
     '#ffc40d', // Yellow 
 
     '#e3a21a', // Orange 
 
     '#da532c', // Dark Orange 
 
     //'#ee1111', // Red 
 
     '#b91d47', // Dark Red 
 
     //'#ffffff', // White 
 
    ]; 
 
    $('article[role="note"]').each(function() { 
 
     var random = Math.floor(Math.random() * (colors.length - 1)) + 0; 
 
     $(this).css('background-color', colors[random]); 
 
    }); 
 
})()

body { 
 
    font-family: "Segoe UI", "Open Sans", sans-serif; 
 
    font-weight: 400; 
 
    font-size: 16px; 
 
    color: #1d1d1d; 
 
    padding: 25px; 
 
} 
 

 
.container { 
 
    max-width: 1000px; 
 
    margin: auto; 
 
} 
 
.container > * { 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 

 
section[role="notes"] { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
      column-count: 3; 
 
    -webkit-column-width: 250px; 
 
    -moz-column-width: 250px; 
 
      column-width: 250px; 
 
    -webkit-column-gap: 10px; 
 
    -moz-column-gap: 10px; 
 
      column-gap: 10px; 
 
} 
 

 
article[role="note"] { 
 
/* -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
      break-inside: avoid;*/ 
 
    display:inline-block; 
 
    background-color: white; 
 
    min-height: 150px; 
 
    margin: 0px; 
 
    margin-bottom: 10px; 
 
    box-shadow: 0px 2px 2px gray; 
 
    -webkit-transition-duration: 0.3s; 
 
      transition-duration: 0.3s; 
 
    width: 100%; 
 
} 
 
article[role="note"]:hover { 
 
    box-shadow: 0px 4px 4px gray; 
 
    cursor: pointer; 
 
} 
 
article[role="note"] header { 
 
    background-color: rgba(29, 29, 29, 0.075); 
 
    padding: 5px; 
 
    text-transform: uppercase; 
 
} 
 
article[role="note"] header h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 16px; 
 
    font-weight: normal; 
 
} 
 
article[role="note"] header time { 
 
    display: none; 
 
} 
 
article[role="note"] div.content { 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <section role="notes" class="container"> 
 

 
     <article role="note"> 
 
     <header> 
 
      <h1>sass or scass</h1> 
 
      <time datetime="2016-06-11 14:50:00 +0200">June 11 2016</time> 
 
     </header> 
 
     <div class="content"> 
 

 
      Whitespaces or tabs Problems 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Ali</h1> 
 
      <time datetime="2016-06-11 14:50:00 +0200">June 11 2016</time> 
 
     </header> 
 
     <div class="content"> 
 

 
      I know where I’m going and I know the truth, and I don’t have to be what you want me to be. I’m free to be what I want. - Muhammad Ali 
 
      I know where I’m going and I know the truth, and I don’t have to be what you want me to be. I’m free to be what I want. - Muhammad Ali 
 
      I know where I’m going and I know the truth, and I don’t have to be what you want me to be. I’m free to be what I want. - Muhammad Ali 
 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Yoda Wisdom</h1> 
 
      <time datetime="2016-06-10 14:50:00 +0200">June 10 2016</time> 
 
     </header> 
 
     <div class="content"> 
 

 
      Always pass on what you have learned. 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Welcome from note!</h1> 
 
      <time datetime="2016-06-09 10:11:58 +0200">June 09 2016</time> 
 
     </header> 
 
     <div class="content"> 
 
      Hello from note! function() { console.log('Hello World!'); } 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Welcome from note!</h1> 
 
      <time datetime="2016-06-09 10:11:58 +0200">June 09 2016</time> 
 
     </header> 
 
     <div class="content"> 
 
      Hello from note #1! function() { console.log('Hello World #1!'); } 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 
     <article role="note"> 
 
     <header> 
 
      <h1>sass or scass</h1> 
 
      <time datetime="2016-06-11 14:50:00 +0200">June 11 2016</time> 
 
     </header> 
 
     <div class="content"> 
 

 
      Whitespaces or tabs Problems 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Ali</h1> 
 
      <time datetime="2016-06-11 14:50:00 +0200">June 11 2016</time> 
 
     </header> 
 
     <div class="content"> 
 

 
      I know where I’m going and I know the truth, and I don’t have to be what you want me to be. I’m free to be what I want. - Muhammad Ali 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Yoda Wisdom</h1> 
 
      <time datetime="2016-06-10 14:50:00 +0200">June 10 2016</time> 
 
     </header> 
 
     <div class="content"> 
 

 
      Always pass on what you have learned. 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Welcome from note!</h1> 
 
      <time datetime="2016-06-09 10:11:58 +0200">June 09 2016</time> 
 
     </header> 
 
     <div class="content"> 
 
      Hello from note! function() { console.log('Hello World!'); } 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 

 
     <article role="note"> 
 
     <header> 
 
      <h1>Welcome from note!</h1> 
 
      <time datetime="2016-06-09 10:11:58 +0200">June 09 2016</time> 
 
     </header> 
 
     <div class="content"> 
 
      Hello from note #1! function() { console.log('Hello World #1!'); } 
 

 

 
     </div> 
 
     <footer> 
 

 
     </footer> 
 
     </article> 
 

 
    </section> 
 
</div> 
 
</div>