請參閱下面的圖片，這隻出現在Chrome瀏覽器（我也測試了邊緣，IE11，Firefox和它的工作）。我也注意到，這是根據屏幕大小隨機發生的。奇怪的CSS行爲與列
這裏是我的sass代碼段從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
有任何解決方法或許可以解決這個問題的一些CSS屬性。
您可以使用display：inline-block的對物品，以避免它們噴了幾列：
(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>
復位顯示內聯塊的文章，它贏得再也不會分成幾列。在這種情況下，打破內部從來沒有在這裏工作，也許在平面媒體上，但不適用於列:( –
謝謝你，你可以寫這個答案，所以我可以關閉這個線程:) –
好吧，困惑，沒有意識到你更新你的codepen與顯示規則:) –