響應式兩欄佈局

谷歌關於「負責任的兩列布局」的第一個鏈接是我想要做的事情，但顛倒了（右欄內容）。顯然，它也是創建列的錯誤方式，因爲包裝並不真正「包裝」。內部div是絕對的，而包裝是相對的。這會產生問題，因爲如果頁面沒有填充文本，頁腳並不真正落在兩個柱子的底部。我能對它做出什麼最好的修正？我也希望這個鏈接能夠超越這個鏈接，否則其他人可能會處於相同的情況。我這裏實現連接它將使雖然較高：/響應式兩欄佈局

.columnsContainer, footer, header { position: relative; margin: .5em; } 
.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }

鏈接：http://codepen.io/johnstonian/pen/guhid

來源

2016-01-17 maugch

包裝怎麼不真正包裝？給我更多的代碼 –

@HermanNz你應該檢查鏈接。有很多代碼。基本上.columnsContainer在HTML中的

的內容重疊.columnsContainer實際上不包裝兩列，因爲rightcolumn處於絕對位置。這隻能通過使用浮點和固定寬度來固定，而不是絕對設置在位置上。你的問題是一樣的：http://stackoverflow.com/questions/3291610/two-column-css-layout-without-having-to-specify-the-right-column?rq=1 –

您可以用絕對位置做的是如下都轉換columsn的一些值：

@media screen and (min-width: 47.5em) { 
    .leftColumn {margin-left: 19.5em;} 
.rightColumn{width: 18.75em; position:absolute; left:0; top:0;} 
}

來源

2016-01-17 14:29:04

我沒有看到一個區別。我認爲問題在於頁腳在左欄完成後開始。我的解決方案可能應該是左邊的區域至少和右邊區域一樣大。 – maugch

響應式兩欄佈局

回答

相關問題