右側邊框互相重疊

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會導致問題。

簡單的基本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

UPDATE：

您可以使用media queries，使之最終響應。

查詢

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

更新SAMPLE

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

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