0

致力于响应式设计，我很好奇我的选择是什么，可以将出现在宽屏视图中内容区域右上角但在移动浏览器中的主要内容之后的旁边定位。

例如

这是这篇文章。[获奖名单]
文章文本可以环绕在一边。
文章文本可以环绕在一边。

在 html5 中，我知道我可以使用以下 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% 的宽度，即使在侧边完成后也是如此。

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

谢谢。

4

1 回答 1

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 桌面上测试。兼容表/ MDN 指南。

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。

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

于 2013-05-22T05:20:58.297 回答