Question

见下图，这只出现在Chrome中（我还测试了Edge，IE11，Firefox，并且它有效）。我也注意到这是根据屏幕尺寸随机发生的。

以下是CodePen的sass代码部分：

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属性可以解决此问题。

Answer 1

你可以使用display：inline-block for article来避免它们喷在几列上：

＆＃13;

(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]);
   });
})()

＆＃13;

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;
}

＆＃13;

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

＆＃13;

列的奇怪CSS行为

1 个答案: