Seltsames CSS-Verhalten mit Spalten

Question

Siehe Bild unten, das erscheint nur in Chrome (Ich habe auch Edge, IE11, Firefox getestet und es hat funktioniert). Ich habe auch festgestellt, dass dies zufällig auf der Bildschirmgröße basiert.

Hier ist Teil meines sass Code aus CodePen:

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 

Gibt es eine Abhilfe oder vielleicht ein paar CSS-Eigenschaften, die dieses Problem beheben können.

Answer 1

Sie Anzeige verwenden können: inline-block für Artikel sie wenige Spalten sprühen zu vermeiden:

(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>