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

Posted 2023-03-04

【中文标题】为啥我的媒体查询将元素从容器中取出？

【英文标题】：Why is my media query putting elements out of their container?为什么我的媒体查询将元素从容器中取出？

【发布时间】：2020-12-18 16:31:09

【问题描述】：

你好社区：我现在正在学习 GridSystems。我根据屏幕大小进行了 2 个媒体查询：第一个是 768 像素，第二个是 480 像素。但是当我调整屏幕尺寸时，元素会从它们的容器中出来。为什么？我已经应用了 clearfix hack。 我希望元素不要从它们的容器元素中出来。（不一定是 .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-1width:16.6666%;
.col-2width:33.3333%;
.col-3width:50%;
.col-4width:100%;

/*Wichtige Viewports
  >1200+px:Desktop
  768px:Tablet Hochformat;
  480px:Handy Querformat
*/

@media(max-width:768px)
  .col-1width:50%
  .col-2width:50%


@media(max-width:480px)
  .col-1width:100%
  .col-2width:100%
  .col-3width: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>

【问题讨论】：

您将元素高度设为：100%，因此如果您将它们放在不同的行中，它们会在逻辑上溢出 --> N * 100% > 1 * 100%

删除它会使情况变得更糟。现在当视口为 时它甚至会溢出

你不应该删除它，你应该重新考虑你的逻辑..如果你删除它，你会让 height=0（它会更糟..）

【参考方案1】：

几件事：

我建议不要显式设置父 .row 元素高度 但是 ruther 将其设置在子元素上 .col - 如果需要 - 最好不要设置它，而是让元素的自然流动从内到外填充 在行类上添加伪 clearfix

我已经在 css 块编辑器中评论了这一点，所以看看这是否能清除你的问题

有一些框架，如 bootstrap 和其他一些框架，可以为您自动执行此操作，但最好采用低路径并了解在集线器下的工作方式 - 干杯

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>