2

我正在使用多个媒体查询来控制不同屏幕尺寸的列数。当页面加载时，它工作得很好。但是我注意到，当我将窗口的宽度缩小到几乎没有，然后再次将其扩展为全宽时，即使我指定column-count为 4，它也只显示 2 列，右边的 2 有一个空格列应该是。所有的内容都还在。只是挤在左边。当我查看当前正在应用的 css 规则时，它仍然显示column-count为 4。我不确定发生了什么。请给点建议？谢谢！

我正在使用的相关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&#39;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&#39;s tummy.</div>
        
        </div>
    
    </div>

</body>

看起来这是一个特定于 Chrome 的问题，因为 Firefox 显示它没问题。

4

0 回答 0