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

时间:2018-12-14 22:22:24

标签: css html5

当我将页面调整为较小尺寸时,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。 溢出自动带来我不喜欢的滚动条。

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

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

似乎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;
  }
}

希望有帮助。