如何正确放置 <aside> 标签？

Question

所以这是我的问题。我的网站在响应式设计上运行，到目前为止一切正常。但主要问题是我应该拥有的 ASIDE 内容。这是我的网站如何按字面划分的一个完美示例：

我的问题是，我如何才能像在此图中正确定位该旁白部分，以便它也可以在整个内容（文章/部分）的底部呈现响应式但当它在 iPhone 上呈现时，旁白就在主要内容的底部有大约 2% 的边距将两者分开？

在桌面上也应该像图中一样呈现。

我可以尝试使用 DIV 来定位 Aside 部分，方法是在此 div 中嵌套 side 然后一个

      float: right;

这会将它移到右边，但我觉得这是一种错误的做法，因为在前面的例子中我看到人们使用 float: left 但在右侧得到相同的结果。

那么我最好的方法是什么？

Answer 1

这是解决方案。

HTML

<div id="wrapper">
<header id="header"> header </header>
<nav id="nav"> navigation </nav>
<article id="article"> article </article>
<aside id="aside"> aside </aside>
<footer id="footer"> footer </footer>
</div>

CSS

body { margin:0; padding:0;}
#wrapper { width:700px; max-width:100%; margin:0 auto;}
#article, #aside, #header, #nav, #footer { background:grey; margin-bottom:10px; text-align:center; padding:20px 0;  color:#fff;}
#article, #aside{float:left;}
#article { width:72.91666666666667%; margin-right:1.041666666666667%;}
#aside { width:26.04166666666667%;}
#footer { clear:left;}

@media only screen and (max-width:600px){
    #article, #aside{float:none; width:100%;}
}

Fiddle Demo

Answer 2

用于小型设备的 css：

@media screen and (max-width: 767px) { // devices recognized as phones - under 768px
 article{width: 100%;}
 aside{width:100%}
}