Question

当我将页面调整为较小尺寸时，DIV重叠。我尝试搜索，但找不到合适的解决方案。

    <div class="column left">

      </div>

      <div class="column Middle">

      </div>

      <div class="column right">

      </div>


.column {
    float: left;
    padding: 5px;
    height: 100%;
    position: relative;

   /*  height:  */
}

.left {
  width: 16%;  
}

.right {
  width: 20%;  
}

.middle {
  position: relative;   
  height: 100%;
  width: 60%;

}

.row h2 {

    color: #800000; 
}


.row:after {

    display: table;
    clear: both;
    height: 100%;
}

@media screen and (max-width: 500px) {
.column {
    padding: 5px;
    height: 100%;
    width: 100%;
    position: relative;
    display: block;
    overflow: visible;
    float: left;

}

当我使用溢出时，DIV不重叠：CSS中的auto。溢出自动带来我不喜欢的滚动条。

能否请您提供最好的解决方案？

Answer 1

我已经复制了您的代码，并且当达到500px断点时，列确实重叠。我不得不修改您的HTML中的中产阶级，因为它大写并且没有CSS样式。我不确定这是否可以解决您的问题？

     <div class="column left">
     </div>
     <div class="column middle">
     </div>
     <div class="column right">
     </div>

.column {
    float: left;
    padding: 5px;
    height: 100%;
    min-height: 300px;
    position: relative;

   /*  height:  */
  }

  .left {
    width: 16%; 
    background: blue;
  }

  .right {
    width: 20%; 
    background: red;
  }

  .middle {
    position: relative;   
    height: 100%;
    width: 60%;
    background: black;
  }

  .row h2 {

      color: #800000; 
  }


  .row:after {

      display: table;
      clear: both;
      height: 100%;
  }

  @media screen and (max-width: 500px) {
  .column {
      padding: 5px;
      height: 100%;
      width: 100%;
      position: relative;
      display: block;
      overflow: visible;
      float: left;

  }

https://codepen.io/Angel-SG/pen/dwMvxN

Answer 2

似乎padding：5px引起了它。当我将宽度更改为100％-10像素（两侧均填充5像素）时，滚动消失了。

@media screen and (max-width: 500px) {
  body { margin: 0;}
  .column {
    padding: 5px;
    height: 100%;
    width: calc(100% - 10px);
    position: relative;
    display: block;
    overflow: visible;
    float: left;
  }
}

希望有帮助。

如何在屏幕调整大小时使用CSS防止DIV重叠？

2 个答案: