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

Stack Overflow用户

提问于 2016-07-21 04:14:29

回答 3查看 157关注 0票数 0

所以我有三个带有类的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时位于中间并消失。

javascript

jquery

html

css

user-interface

回答 3

Stack Overflow用户

发布于 2016-07-21 04:40:56

我认为，你应该使用媒体查询。下面是一些媒体查询的参考链接。

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

票数 3

Stack Overflow用户

发布于 2016-07-21 06:08:42

Css完全取决于你想要的各种框的大小，我个人会设置所有三个div的百分比，比如宽度为'33.33333333%‘，然后编写一个针对@ media ( max-width: 800px )的媒体查询，然后将中间的div设置为无，将左侧和右侧设置为50%宽度。这应该会给你想要的效果。

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

票数 0

Stack Overflow用户

发布于 2017-09-07 15:54:26

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