如何解决为什么我的媒体查询会将元素从容器中取出?
您好社区:我现在正在学习GridSystems。我根据屏幕尺寸进行了2次媒体查询:第一个是768像素,第二个是480像素。但是当我调整屏幕尺寸时,元素从它们的容器中出来。为什么?我已经应用了clearfix hack。 我希望这些元素不要来自它们的容器元素。(不一定是.container,而是每个容器元素。)
O(3^(n/3))
html,body{
Box-sizing:border-Box;
margin:0;
}
.container{
width:95%;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
.container::after{
content:"";
clear:both;
display:block;
}
.row{
Box-sizing:border-Box;
height:50px;
border:5px solid orange;
width:auto;
}
.col{
float:left;
Box-sizing:border-Box;
height:100%;
border:5px solid red;
width:auto;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%;}
.col-4{width:100%;}
/*Wichtige Viewports
>1200+px:Desktop
768px:Tablet Hochformat;
480px:Handy Querformat
*/
@media(max-width:768px){
.col-1{width:50%}
.col-2{width:50%}
}
@media(max-width:480px){
.col-1{width:100%}
.col-2{width:100%}
.col-3{width:100%}
}
解决方法
事物的结合:
- 我建议不要将父
.row
元素的高度设置为明确 - 但是要在子元素
.col
上设置它-如果需要的话-最好不要设置它,而是让元素的自然流动由内而外填充 - 在行类上添加伪clearfix
我已经在css块编辑器中对此进行了注释,请注意这是否清除了
有一些引导程序和其他一些框架可以自动为您执行此操作,但是最好走低路并了解中心下的工作方式-欢呼
html,body {
box-sizing: border-box;
margin: 0;
font-size: 16px;
}
.container {
width: 95%;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.row {
box-sizing: border-box;
/* height: 50px;
I'd suggest to not have explicit height set on parent
*/
border: 5px solid orange;
width: auto;
}
/* set row's after pseudo to clear floats of child elems - short clearfix */
.row:after{
content: '';
clear: both;
display: table;
}
.col {
float: left;
box-sizing: border-box;
height: 2em; /* but would suggest to set height of child elements - .col's */
border: 5px solid red;
width: auto;
}
.col-1 {
width: 16.6666%;
}
.col-2 {
width: 33.3333%;
}
.col-3 {
width: 50%;
}
.col-4 {
width: 100%;
}
/*Wichtige Viewports
>1200+px:Desktop
768px:Tablet Hochformat;
480px:Handy Querformat
*/
@media(max-width:768px) {
.col-1 {
width: 50%
}
.col-2 {
width: 50%
}
}
@media(max-width:480px) {
.col-1 {
width: 100%
}
.col-2 {
width: 100%
}
.col-3 {
width: 100%
}
}
<div class="container">
<div class="row">
<div class="col col-1"></div>
<div class="col col-1"></div>
<div class="col col-1"></div>
<div class="col col-1"></div>
<div class="col col-1"></div>
<div class="col col-1"></div>
</div>
<div class="row">
<div class="col col-2"></div>
<div class="col col-2"></div>
<div class="col col-2"></div>
</div>
<div class="row">
<div class="col col-3"></div>
<div class="col col-3"></div>
</div>
<div class="row">
<div class="col col-4"></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。