如何正确放置< aside>标签？ [英] How do i correctly Place an <aside> tag?

问题描述

所以这里是我的问题。我的网站运行响应式设计，一切到现在都工作正常。但主要的问题是ASIDE内容我应该有。这是一个完美的例子，说明我的网站是如何划分的：

So here is my problem. My site runs on responsive design, Everything till now is working fine. But the main problem is the ASIDE content i should have. Here is a perfect example of how my site is literally sectioned:

我的问题是，我如何正确地放置这个部分，如图所示，所以它也可以渲染响应BUT在底部整个内容（文章/部分），所以当它在iPhone上呈现时，旁边是正确的在底部的主要内容与约2％的利润分隔两个？

My question is, how can i correctly position that aside section like in this diagram so it can also render responsive BUT on the bottom of the entire content (article/section) so when it renders on iPhone, the aside is right in the bottom of the main content with about 2% margin separating the Two?

我可以尝试使用DIV来定位Aside节，方法是在这个div中嵌入aside，然后使用

I can attempt to position the Aside section using a DIV by nesting the aside in this div and then a

      float: right;

这将把它移到右边，但我觉得这是一个错误的方式，因为前面的例子我看到人们使用float：left，但在右边得到相同的结果。

which would move it to the right but i feel that it is a wrong way to do it since on previous examples i see people use float: left and yet get the same result on the right side.

那么，我最好的方式是什么？

So what would be my best way of doing this ?

推荐答案

这是解决方案。

HTML / p>

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

小提琴演示

这篇关于如何正确放置< aside>标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！