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 に答える