响应两列布局

Question

谷歌中的第一个链接＆＃34;负责两列布局＆＃34;是我想要做的事情，但是反过来了（右栏中的内容）。显然，这也是创建列的错误方法，因为包装器并没有真正地包装＆＃34;。内部div是绝对的，而包装器是相对的。这会产生问题，因为如果页脚没有文字，则页脚并不真正位于两个列的底部。我能做出的最佳修正是什么？此外，我希望此链接将超出该链接或其他人可能处于相同的情况。 我知道在这里链接它会使它更高：/

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

link：http://codepen.io/johnstonian/pen/guhid

Answer 1

你可以用绝对位置做的是将两个columsn的值转换成如下：

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