为什么我的媒体查询将元素从其容器中取出？-解网

问：

您好社区：我现在正在学习 GridSystems。我根据屏幕尺寸进行了 2 个媒体查询：第一个是 768px，第二个是 480px。但是当我调整屏幕尺寸时，元素会从容器中出来。为什么？我已经应用了clearfix黑客。我希望元素不会从它们的容器元素中出来。（不一定是 .container，而是每个容器元素。

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

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

html 媒体查询 css-float clearfix

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>

上一个：为什么带有 .clearfix 类的元素会折叠？

下一个：响应式媒体卡图像在左边，文字在右边

为什么我的媒体查询将元素从其容器中取出？

Why is my media query putting elements out of their container?

评论