html - 移动 View 中主要内容之后的旁边选项，平板电脑/台式机的右上角

Question

在响应式设计中工作，我很好奇我的选择是什么来定位在宽屏 View 中显示在内容区域右上角但在移动浏览器中主要内容之后的旁边。

例如

Here's the article. [list of winners]Article text can wrap around the aside.Article text can wrap around the aside.

In html5 I know I could use the following HTML:

<div class="main">
<article>Here's the article</article>
<aside>List of winners</aside>
</div>

以及以下 CSS:

@media only screen and (min-width:768px) {
.main article {
    float:left;
    width:57%;
}
.main aside {
    float:right;
    width:28%;
}
}

这样我就可以在宽屏和移动设备下方的文章旁边添加旁白。但是文章文本不会环绕在旁边的底部，并且会在页面的整个长度上保持在 57% 的宽度，即使在旁边完成后也是如此。

有没有什么方法可以实现我正在寻找的东西，或者这个解决方案是否过于笨拙？

谢谢。

Answer 1

如果你不介意涉及 JS:

http://jsfiddle.net/77NwN/2/

HTML:

<div class="main">
    <aside class="float">List of winners</aside>
    <article>
        <p>Here's the article</p>
        <p>Article text that can wrap around &lt;aside&gt;</p>
        <p>Article text that can wrap around &lt;aside&gt;</p>
    </article>
</div>

CSS:

@media {
    .main aside.float {
        display:none;
    }
}
@media (min-width:350px) {
    .main aside.under {
        display:none;
    }
    .main aside.float {
        display:initial;
        float:right;
        width:28%;
    }
}

JS:

window.onload=function(){
    var aside=document.querySelector("div.main aside.float");
    aside=aside.cloneNode(true);
    aside.className="under";
    document.querySelector("div.main").appendChild(aside);
};

---

如果你不介意使用flexbox:

(灵感来自@dstorey)

警告:仅在 Chrome 26 桌面和 Firefox 21 桌面上测试。 Compatible table/MDN guide .

http://jsfiddle.net/77NwN/3/

HTML:

<div class="main">
    <aside>List of winners</aside>
    <article>
        <p>Here's the article</p>
        <p>Article text that can wrap around &lt;aside&gt;</p>
        <p>Article text that can wrap around &lt;aside&gt;</p>
    </article>
</div>

CSS:

@media {
    .main aside {
        float:right;
        width:28%;
    }
}
@media (max-width:350px) { /* notice I change min-width to max-width */
    .main {
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:column;
        flex-direction:column;
    }
    .main article {
        -webkit-order:1;
        order:1;
    }
    .main aside {
        -webkit-order:2;
        order:2;
        float:initial;
        width:initial;
    }
}

不涉及 JS。

我不确定“旧语法”到底是什么，因为当他们讨论它时我并没有太注意那个话题......