代码之家 › 专栏 › 技术社区 › Umar Abdullah

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

html5 css

0

Umar Abdullah · 技术社区 · 7 年前

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

}

你能建议最好的解决方案吗?

2 回复 | 直到 7 年前

1

ASG 7 年前

     <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

2

0

A. Meshu James Shuttler 7 年前

似乎是填充物:5px造成的。当我将宽度更改为100%-10px(两侧填充5px)时,滚动消失。

@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;
  }
}

希望有帮助。