Question

我有一个问题，当缩小屏幕尺寸时，两个相邻的div在旁边正常工作但是如果我添加内容溢出被隐藏并创建一个滚动条。我已经尝试用overflow auto清理，我已经创建了一个div来尝试清除它，我甚至尝试了旧学校，但没有任何作用？

<div class="wrapper" style="margin-top:20px;">



    <div class="columnsContainer" style="overflow: auto;">

      <div class="leftColumn">

      <h2>Get in touch</h2> 

          <p></p>


          <form>

              <input type="text">

              <br />

              <input type="text">

               <br />

              <input type="text">

               <br />

              <textarea></textarea>

              <br />

              <button type="submit">Send</button>





          </form>


      </div>

      <div class="rightColumn">
        <h2>How to find us</h2>

        <p>bla bla</p>

        <p>bla bla</p>

        <p>bla bla</p>

        <p>bla bla</p>

        <p>bla bla</p>


      </div>


    </div>


</div>


.columnsContainer { position: relative; margin: .5em; display: block; }

.leftColumn {  border: 1px solid  #ccc; padding: 1.25em; margin-bottom: .5em; }

.rightColumn { border: 1px solid  #ccc; padding: 1.25em; }



@media screen and (min-width: 47.5em ) {
  .leftColumn { margin-right: 19.5em; }

  .rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   
}


.wrapper{
    max-width: 1200px;
    margin: auto;
    overflow:auto;
}

Answer 1

嗨，我从你的描述中不太清楚你想要它的样子，如果它只是你要摆脱的卷轴。在不知道页面其余部分发生了什么的情况下，很难知道这些块是否可以延伸到彼此的高度，但无论如何，如果它有用，我已经做了一个小提琴并重写了你的CSS使用浮点数和％宽度而不是绝对定位和边距。

http://jsfiddle.net/Kimberley_p/BynDq/

.columnsContainer {
    display:block;
}
.leftColumn, .rightColumn {
    width:40%;
    padding:20px;
    border:1px solid #999;
    float:left;
}
.leftColumn {
    margin-right:5%;
}

正如我所说，这将取决于页面其余部分还有什么其他内容。

清除相对div

1 个答案: