0

私の理解では、フローティング列のコンテンツまたはフローティング列の内側の 2 つのセクションを分割して、モバイルまたはタブレット上で完全に異なる位置を与えることができないため、解決策が利用できないことを少し恐れている状況があります。position:absolute;Web ページの応答性と動的コンテンツを維持するためには、適切なオプションではないと思いますか?

注意: 私のクライアントは、デスクトップからモバイル、またはその逆のすべての方法で、これをレスポンシブにすることを望んでいます。

このワイヤーフレームを作成しました。この状況を処理する方法を教えてください。

この質問に対するすべての返信/フィードバックに感謝します!

これは、モバイルとデスクトップ + タブレットの両方で使用したい、左の列と右の列とそのネストされた「DIVs」セクションの可能なコードです。

.content { background:#dddddd; }
.left-column { float:left; width:60%; background:#5ba5f1; padding:20px; box-sizing:border-box; min-height:600px; }
.right-column { float:right; width: 35%; background:#6fc561; padding:20px; box-sizing:border-box; }
.section1 { background:#e7e265; margin-bottom:20px; border:1px solid #000; min-height:200px; }
.section2 { background:#e7e265; margin-bottom:20px; border:1px solid #000; min-height:200px; }
<div class="content">
    <div class="left-column">Lorem ipsum dolor sit amet, consectetur.....</div>
    <div class="right-column">
    <div class="section1">Section 1 of right column</div>
    <div class="section2">Section 2 of right column</div>
    </div>
    </div>

ここに画像の説明を入力

4

1 に答える 1

1

私はあなたのhtmlを次のように変更しました:

<div class="content">
    <div class="right-column">
        <div class="section1">Section 1 of right column</div>
    </div>
    <div class="left-column">Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur.</div>
    <div class="right-column">
        <div class="section2">Section 2 of right column</div>
    </div>

</div>

タブレットとモバイル用の特別なレイアウトを表示するためにメディアクエリを使用すると思います。resize()イベントで「モバイル」クラスを追加することをシミュレートします。

CSS

.content {
    background:#dddddd;
}
.left-column {
    float:left;
    width:60%;
    background:#5ba5f1;
    padding:20px;
    box-sizing:border-box;
    min-height:600px;
}
.right-column {
    float:right;
    width: 35%;
    background:#6fc561;
    padding:20px;
    box-sizing:border-box;
}
.section1 {
    background:#e7e265;
    margin-bottom:20px;
    border:1px solid #000;
    min-height:200px;
}
.section2 {
    background:#e7e265;
    margin-bottom:20px;
    border:1px solid #000;
    min-height:200px;
}

/*/////////////////////////*/
/* Mobile settings*/
/*/////////////////////////*/


.mobile .left-column {
    width:100%;
    background:#ccc;
    min-height:inherit;
}
.mobile .right-column {
    width: 100%;
    background:#ccc;
}

JS

$( window ).resize(function() {
    $(".content").addClass("mobile")
});

実施例

于 2015-04-09T08:01:53.863 に答える