右侧边栏相互重叠

Question

我正在尝试创建响应右栏。问题是，当我为右列创建一个新的div时，它会超过前一个右侧边栏。我该如何解决这个问题？

这是LINK

我的CSS：

.columnsContainer, footer, header { position: relative; margin: .5em; }

.leftColumn, .rightColumn, footer, header {  border: 1px solid  #ccc; padding: 1.25em; }

.leftColumn { margin-bottom: .5em; }

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

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

谢谢

Answer 1

你应该想到你的布局。问题出现在你的造型上。特别是position: absolut会导致问题。

SIMPLE BASIC TAMPLATE

您应该创建一个列，一个右列和一个页脚。然后将内容放在每一列中。

基本布局可以是：

<div class="wrapper">

    <div class="col-left">
        Column left 
        <div class="content-left">
            content left content
        </div>
        <div class="content-left">
            content left content
        </div>
        <div class="content-left">
            content left content
        </div>
    </div>
    <div class="col-right">
        Column right
        <div class="content-right">
            content right content
        </div>
        <div class="content-right">
            content right content
        </div>
        <div class="content-right">
            content right content
        </div>
    </div>
    <div class="footer">
        footer
        <div class="content-footer">
            footer conten
        </div>
    </div>
</div>

并且CSS看起来像：

.wrapper{
    margin: 0 auto;
    width: 50%;
}
.col-left{
    float: left;
    width: 70%;
    background-color: aliceblue;
}
.col-right{
    float: right;
    width: 30%;
    background-color: ActiveCaption;
}
.footer{
    clear: both;
    background-color: bisque;
    height: 100px;
}
.content-left{
    height: 100px;
}

.content-left, .content-right, .content-footer{
    border: 1px solid black;
    margin: 10px;
}

这只是基本响应式布局的示例。您可以根据自己的需要轻松调整它。

SEE SAMPLE

更新：

您可以使用media queries使其最终响应。

查询

@media (max-width: 700px){
    .col-left, .col-right{
        width: 100%;  
        float: none;
     }
}

更新SAMPLE

＆＃13;

＆＃13;

    .wrapper{
        margin: 0 auto;
        width: 50%;
    }
    .col-left{
        float: left;
        width: 70%;
        background-color: aliceblue;
    }
    .col-right{
        float: right;
        width: 30%;
        background-color: ActiveCaption;
    }
    .footer{
        clear: both;
        background-color: bisque;
        height: 100px;
    }
    .content-left{
        height: 100px;
    }

    .content-left, .content-right, .content-footer{
        border: 1px solid black;
        margin: 10px;
    }

    @media (max-width: 700px){
        .col-left, .col-right{
            width: 100%;  
            float: none;
         }
    }

＆＃13;

<div class="wrapper">

        <div class="col-left">
            Column left 
            <div class="content-left">
                content left content
            </div>
            <div class="content-left">
                content left content
            </div>
            <div class="content-left">
                content left content
            </div>
        </div>
        <div class="col-right">
            Column right
            <div class="content-right">
                content right content
            </div>
            <div class="content-right">
                content right content
            </div>
            <div class="content-right">
                content right content
            </div>
        </div>
        <div class="footer">
            footer
            <div class="content-footer">
                footer conten
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;