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则消失，如divs本身所述。

我已经指定了float：left to box1和float：right to 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;
    }
}

Answer 2

Css都取决于你想要各种盒子的大小，我个人会将百分比设置为所有三个div，比如33.33333333％＆＃39;对于宽度，然后编写一个目标@media（最大宽度：800px）的媒体查询，然后设置您的中间div显示无，左和右设置为50％宽度。这应该会给你想要的效果。

您还应该将第三个div移动到第二个位置，或者使用flex来对它们进行不同的排序：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

          <div class="boxes">
              <div class="box1">This box should be on the left side of the page</div>
              <div class="spacer"></div>
              <div class="box3">This box should be at the center of the page and should disappear if the page is less than 800px.</div>
              <div class="spacer"></div>
              <div class="box2">This box should be on the right side of the page</div>
              <br/>
          </div>


    .boxes {display: flex;}

    .box1 {
        background-color: green;
        width: 200px;
        float: left;
    }
    .box2 {
        background-color: grey;
        width: 200px;
        float: right;
    }
    .box3 {
        background-color: aqua;
        width: 200px;
        flex: auto;
    }

    .spacer {flex-grow: 1}

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

无论如何我就这样做了......

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

3 个答案: