如果页面大小有一定限制，如何将三个div对齐并使其中一个div消失？
如果页面大小有一定限制，如何将三个div对齐并使其中一个div消失？
提问于 2016-07-21 12:14:29
所以我有三个带有类的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时位于中间并消失。
回答 3
Stack Overflow用户
发布于 2016-07-21 12: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;
}
}Stack Overflow用户
发布于 2016-07-21 14:08:42
Css完全取决于你想要的各种框的大小，我个人会设置所有三个div的百分比，比如宽度为'33.33333333%‘，然后编写一个针对@ media ( max-width: 800px )的媒体查询，然后将中间的div设置为无，将左侧和右侧设置为50%宽度。这应该会给你想要的效果。
您还应该将第三个div移到第二个位置，或者使用flex以不同的方式对它们进行排序：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Stack Overflow用户
发布于 2017-09-07 23: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;
}
}不管怎么说，我就是这么做的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38494773
复制相关文章
相似问题
腾讯云开发者
