さまざまな画面サイズの列の量を制御するために、いくつかのメディア クエリを使用しています。ページが読み込まれると、うまく機能します。ただし、ウィンドウの幅をほとんどゼロに縮小してから再度全幅に拡大すると、column-count4 に指定したにもかかわらず、2 列しか表示されず、右側の 2 が空白になっていることに気付きました。列である必要があります。すべてのコンテンツはまだそこにあります。左側に押しつぶされただけです。現在適用されている CSS ルールを見ると、まだcolumn-count4 と表示されています。何が起こっているのかわかりません。ヒントをください？ありがとう！
私が使用している関連CSS：
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
作業例: http://jsfiddle.net/1o12sqsq/
スニペット:
body{
font-size: 16px;
margin:0;
}
div, form{
box-sizing: border-box;
}
.top-bar{
color: white;
background:black;
margin:auto;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 10px;
/*border-bottom: white 3px solid;*/
}
.top-bar .oyster{
font-size: 40px;
}
.top-bar ul{
float:right;
}
.top-bar li{
text-decoration:none;
display:inline-block;
}
.top-bar a{
text-decoration:none;
color: white;
}
.top-bar ul li .item{
font-size: 18px;
padding-right:20px;
}
.presenting{
margin-top: 3vh;
font-size: 2vmax;
display:block;
text-align:center;
}
.current{
text-align:center;
font-size: 10vmax;
}
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
.review{
display:inline-block;
padding-bottom: 20px;
}
.question{
color:brown;
font-size: 1.3em;
}
.answer{
font-size: 1.8em;
}
@media (max-width:797px){
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
}
@media (min-width:798px) and (max-width:1200px){
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
}
@media (min-width:1201px){
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
}<!DOCTYPE html>
<body>
<div class="top-bar">
<a href="/" class="oyster">Oyster</a>
<ul>
<li><a class="item" href="/review_form/">Write</a></li>
<li><a class="item" href="/profile/">andrew</a></li>
<li><a class="item" href="/logout/">Log out</a></li>
<li><a class="item" href="/archives/">Archives</a></li>
</ul>
</div>
<span class="presenting">Presenting this week's subject,</span>
<h1 class="current">The Ocean</h1>
<div class="reviews">
<div class="review">
4 by andrew
<div class="question">What is your favorite spot?</div>
<div class="answer">sad</div>
<div class="question">Do you like the ocean?</div>
<div class="answer">not really</div>
<div class="question">What is your favorite spot?</div>
<div class="answer">sleeping</div>
</div>
<div class="review">
3 by andrew
<div class="question">Would you like to live there?</div>
<div class="answer">frog</div>
<div class="question">What is your favorite spot?</div>
<div class="answer">butts</div>
<div class="question">What are some of the advantages of the ocean?</div>
<div class="answer">none</div>
</div>
<div class="review">
4 by andrew
<div class="question">Would you like to die in the ocean?</div>
<div class="answer">no</div>
<div class="question">Do you like the ocean?</div>
<div class="answer">naw</div>
<div class="question">Every year many people drown in the ocean. How do you feel about that?</div>
<div class="answer">god awful</div>
</div>
<div class="review">
4 by andrew
<div class="question">When was the last time you've been to the ocean?</div>
<div class="answer">I frankly do not remember.</div>
<div class="question">Every year many people drown in the ocean. How do you feel about that?</div>
<div class="answer">I feel god awful of course! How could such a petty thing happen to such important people in our lives?! I simply cannot believe this!!</div>
<div class="question">What are some of the advantages of the ocean?</div>
<div class="answer">Probably none.</div>
</div>
<div class="review">
3 by andrew
<div class="question">Would you sing by the ocean?</div>
<div class="answer">No sir!</div>
<div class="question">Would you like to die in the ocean?</div>
<div class="answer">Of course not, that is preposterous!</div>
<div class="question">What is your favorite spot?</div>
<div class="answer">My favorite spot would be to inside the a whale's tummy.</div>
</div>
</div>
</body>Firefox では問題なく表示されるため、Chrome 固有の問題のようです。