CSS clear 不适用于媒体查询

Question

iv 在宽度为 25% 时得到 4 个 div，div 1 文本 div 2 图像，diz 3 文本 div 4 图像 @ 媒体 480 我想必须排，但是 div 3 卡住了，我有 3 行 :( 认为你明白我的意思了，哈哈。我在 2 div 上都放了一个 clear，是的，它可以工作，但在媒体 768 上，它应该在 1 行上，但知道它仍然在 2 行上，但在屏幕上，所以我没有放 clear none 然后它会不再工作

<div id="box1" class="column1 four">
        <h3>BOX 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
    </div>
    <div id="box2" class="column1 four">
        <h3>BOX 2</h3>
        <img src="img/box2.jpg">

    </div><div class="clear"></div>
    <div id="box3" class="column1 four">
        <h3>BOX 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
    </div>
    <div id="box4" class="column1 four">
        <h3>BOX 4</h3>
        <img src="img/box4.png">

</div>

CSS

@media only screen and (min-width: 480px) {
 .clear {clear: both}

@media only screen and (min-width: 768px) {

} .clear {清除:无;}

Answer 1

了解如何编写和使用 CSS media queries

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

所以在你的情况下应该是

@media only screen and (min-width: 480px){
 .clear {clear: both}
}

@media only screen and (min-width: 768px) {
 .clear {clear: none;}
}