CSS 清除不使用媒体查询

Question

iv get 4 div at width 25%, div 1 text div 2 image, diz 3 text div 4 image @ media 480 我想必须排，但是 div 3 卡住了，我有 3 行 :( 想你明白我的意思了哈哈。我在 2 div 上都写得很清楚，是的，它有效，但在媒体 768 上应该在 1 行，但知道它仍然在 2 行，但在屏幕上，所以我把 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 {clear: none;}

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

CSS 清除不使用媒体查询

CSS clear not working with Media Query

css

clearfix

media-queries