1

だから、これはstackoverflowでの私の最初のQであり、最終的にアカウントを「作成」すると、自分自身と「類似した」質問タイトルのかなり大きなリストが表示されます...しかし、私は答えを見つけるためにGoogleをほとんど悪用してきました.無駄に; それで、ここに行きます。

私は html と css にかなり慣れていませんが、過去 2 か月未満の間に、猛烈なペースで、積極的かつ強迫観念的に、可能な限り多くの知識を急速に獲得してきました。

しかし、自分のレイアウトでやりたいことに気付いたのですが、達成できないようです。

おそらく、誰もが「リキッド」レイアウトと、信じられないほど人気のある「聖杯」の 3 カラム レイアウトについて知っていると思います。

このタイプのレイアウトを使用したいのは、私の意見では、それが最も美的に楽しいからです...しかし、私は意味的に自分自身を書きたいので、誰かを「コピー」しないので、私自身のフレームワークと個人的なつながりがあり、自分のマークアップを見たときに他の誰かが考えていたことを理解する必要はありません。

目標は次のとおりです。

メイン コンテンツを中央に配置し、2 つの「サイド バー」列で囲み、フル解像度から幅 320px までの「リキッド」全体を配置します。

ただし、SEO の目的で、「メイン コンテンツ」列 (中央の列) を DOM ツリーの 1 番目にし、サイド バーを次のようにします。

1番目）ページ幅に合わせて流動的に縮小し、次に2番目）ページが非常に狭くなるため、「メインコンテンツ」（中央）の列を左に「スナップ」し、上に残し、幅100％にする必要があります.3番目) サイド バーがメイン コンテンツ列の「下」に「スナップ」し、それぞれが幅の 50% を占めます。

そのため、3 つの列すべてが常にページの全幅を占めており、サイド バーが「スナップ」すると、「中央」の列と同じ幅になります。

このようなもの：

|2222111111113333|
|________________|

|222111111333| <--
|____________|

|22111133| <--
|________|

*snap*(a)

|1111| <--
|2233|
|____|

|11| <--
|11|
|22|
|33|

または:スナップ(b)

|111111| <--
|222333|
|______|

|111| <--
|111|
|222|
|333|

|11| <--
|11|
|11|
|22|
|2_|
|33|
|3_|

私が何をしているのか分かりますか？

問題は次のとおりです。

私が考えたり検索したりできることはすべて試してみました...そして、cssが「DOM：1st / middle」列を真ん中と一番上にとどめる方法はないようです。また、両方のサイドバーを対称に保ち、スペースを確保し、3 つの柱すべてを常にすっきりとした箱に収めます。

私は中央の列をトップに保ち、DOM で 1 位にすることができましたが、そうすることでサイド列に混乱と無秩序がもたらされます。一番上ですが、その div に #3 を配置すると、すべてが台無しになります。

この1 つの小さな問題は、私にとって非常に苛立たしいものであり、今では何週間もそれに取り組んできました。(html と css の学習を始めたのはほぼ 2 か月前です。時間の半分は、この 1 つの問題に取り組むのに費やされています)

誰かが私が話していること、やろうとしていることを正確に知っていて、知っているなら:

A）これが可能かどうか

B）これを行う方法

私は絶対に知りたいと思っています...なぜなら私は本当にこの1つの小さな（読む：巨大な）問題を超えて、世界支配への道を歩み続けたいからです.

TL;DR:

「|213|」を作りたい なる：

|1|
|2|
|3|

これに変わることなく：

|_1_|
|2__|
|__3|

またはこれ：

|_1_|
|2_3|
|___|

最大画面と最小画面の間の任意の時点。

できる？それとも、（あきらめて）レイアウト戦略を調整して先に進むべきですか？

4

2 に答える 2

3

これはあなたが探しているようなものだと思います：

http://jsfiddle.net/grc4/kcX5n/

ウィンドウのサイズが変更されたときに、jQuery を使用してページのレイアウトを変更します。別のアプローチとして css3 メディア クエリを使用することもできますが、要素の順序を (213 から 123 に) 変更する方法がわかりません。

于 2012-04-21T06:52:07.020 に答える
0

古い質問ですが、非常に単純なcssだと思います：

#col1{float:right}
#col2{float:left}
#col3{float:right}
于 2013-06-20T22:23:17.050 に答える