3

私は運が悪いと頭を悩ませてきました。デザイナーには、3 列のサイト、2 つのサイドバー、1 つのメイン コンテンツ エリアがあります。

デスクトップ用に設計されており、左の列、メイン コンテンツ、右の列があります。ただし、小さいデバイスでは、メイン コンテンツを最初にスタックする必要があります。

したがって、通常、これを機能させるには

<div id="left" style="float:left;">...</div>
<div id="right" style="float:right;">...</div>
<div id="main" style="margin-left:[width of left col];">...</div>

また

<div id="left" style="float:left;">...</div>
<div id="main" style="float:left;">...</div>
<div id="right" style="float:left;">...</div>

しかし、これは応答時にメイン コンテンツ領域を最初に表示するという問題を解決しません。私の唯一の解決策は、メインが最初に来るようにマークアップすることです:

<div id="main">...</div> 
<div id="left">...</div>
<div id="right">...</div>

しかし、これらの div の高さが不明であるため、デスクトップ用にスタイルを設定することはできません。

何か案は？過度に？

ありがとう。

4

2 に答える 2

0 
<div id="left" style="float:left;">...</div>
<div id="main" style="float:left;">...</div>
<div id="right" style="float:left;">...</div>

javascriptを使用して、最初の列（左）と2番目の列（メイン）の高さを取得できます。それらの値を取得したら、それを使用して、2つの値の位置css値を配置できます。

メインの場合は負のトップポジションを割り当ててトップに配置し、左側の場合はポジティブトップポジションを配置します。

于 2013-01-14T03:08:58.833 に答える
0

優れたResponsive Patterns サイトのこのレイアウトは、あなたが探しているもののようです。

于 2012-10-01T20:43:24.557 に答える