javascript - 如果页面大小有一定限制，如何将三个 div 对齐并让其中一个消失？

Question

所以我有三个带有类的 div，如代码片段所示。

/* CSS Question #4 */
        .box1 {
            background-color: green;
            width: 200px;
        }
        .box2 {
            background-color: grey;
            width: 200px;
        }
        .box3 {
            background-color: aqua;
            width: 200px;
        }

<div>
              <h1>Arrage the div:</h1>
              <div>
                  <div class="box1">This one should be on the left side of the page</div>
                  <div class="box2">This one should be on the right side of the page</div>
                  <div class="box3">This one should be at the center of the page and it should disappear if the page become less than 800px.</div>
              </div>
          </div>

我试图让 box1 位于左侧，让 box2 位于右侧，对于 box3，它需要位于中间，如果页面小于 800px，它就会消失，如 div 本身所述.

我已将 float:left 分配给 box1，将 float:right 分配给 box2，使它们分别向左和向右对齐。但是我不确定如何让 box3 位于中间并在页面小于 800px 时消失。

Answer 1

我认为，您应该使用媒体查询。以下是媒体查询的一些引用链接。

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://learnlayout.com/media-queries.html

上述解决方案，

    .box1 {
            background-color: green;
            width: 50%;
            float:left;
          }
    .box2 {
             background-color: grey;
             width: 50%;
             float:right;
          }
    .box3 {
             background-color: aqua;
             width: 100%;
             clear:both;
          } 

媒体查询

@media screen and (max-width: 800px) {
    .box3 {
           display:none;
    }
}