4

このページをチェックしてください: http://new.brixwork.com/realtors/real-estate-website-features

大きなコンピューター画面の下では、画像とテキスト ブロックが階段状に交互に配置されています。ある div では画像が右に、別の div では左に、画像が配置されています。しかも4ブロック。

レスポンシブ グリッド デザインに Skeleton フレームワーク (www.getskeleton.com) を使用しているので、グリッドはビューポート クエリでサイズ変更されます。これは素晴らしいことです。ただし、画像とテキスト ボックスがシャッフルして重なり合うと、iPhone または iPad の垂直ビューで問題が発生します。

それ以外の

画像 テキスト テキスト 画像 画像 テキスト テキスト 画像

私は得る

画像 テキスト テキスト 画像 画像 テキスト テキスト 画像

オブジェクトが HTML に入力された順序のためです。

問題は、CSS を介してアイテムを再配置する賢い方法があるかどうかです。私はすでに次のようなメディアクエリを使用しています:

    @media only screen and (max-width: 959px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

}

何か案は？ウィンドウサイズを検出し、回避できる場合はサイズを変更するためにjQueryに頼らずにこれを行いたいです。PHP を使用して「エコー」の DIV オーダーを変更することはできません。これは、タブレットが水平位置から垂直位置に移動した場合に再シャッフルを効果的に実行したいためです。

4

1 に答える 1

2

意志あるところに道あり！「6 列のアルファ」や「10 列のオメガ」などのセマンティクスを使用するフレームワークを使用する場合の大きな欠点は、視覚的な順序付けに対する期待が生じることです。左側に 6 列、右側に 10 列が表示されます。マークアップでは順序が正しいため、アルファ/オメガの命名規則が余白に影響します。あなたは著者にとって予期しないユースケースに出くわしたと思います。

(ちなみに、あなたのten column領域には、コンテナーからはみ出している画像も含まれています。つまり、サイズが変更されていません)。

生品：

将来の保守性に関する私の率直なアドバイスは、スケルトンから学び、そこから必要なものを取り出して、そのさまざまなクラスが何をするかを理解して...そして再発明することです。

たとえば、メイン ページにあるのは、一連の機能コンテナーです。マークアップは、次のように一貫性があるはずです。

<div class="featurebox">
  <div class="media">Image, slider, or other visual interest items here</div>
  <div class="items">Text of items of interest</div>
</div>
<div class="featurebox">
  <div class="media">A different image, slider, etc</div>
  <div class="items">More text of items of interest</div>
</div>

そして、これらをスタイルして、左右の効果を作成できます。ここでの鍵はセレクタにあります。他のすべての機能ボックス内の div を左ではなく右にフローティングすることで、効果が簡単に得られます。

.featurebox { width: 600px; overflow: hidden; clear: both;}

.featurebox div { float: left; }
.featurebox:nth-of-type(odd) div { float: right; }

.items { width: 200px }
.media {background-color: grey; width:400px; height: 100px;}

フィドル: http://jsfiddle.net/7qRfh/

現在持っているものを変更する際の問題は、これが浮動小数点数を左から右に積み重ねるというスケルトンの期待に実際には適合しないことです。「フーイ」と言いたい場合は、コンテナを識別し、1 つおきにターゲットを設定し、.columnsフロートの向きを反転させることができます。また、オメガとアルファのクラスの動作をオーバーライドして、オメガが実際にアルファのように動作するようにする必要があります。私の意見では、混乱しますが、うまくいきます。

ハック

私はここにフィドルを持っていたので、それを閉じたと思います。履歴に URL が見つからないため、最初に保存しなかった可能性があります。:-/

でも構わない。要約すると、現在のマークアップで必要なことを行うことができますが、CSS の変更はさらに広範囲に及び、厄介なものになります。

コンテナーには既に position: absolute があるため、"six" 列と "ten" 列を unfloat し、"ten" を上に、"six" を下に配置して絶対に配置する必要があります。大きな問題は、コンテナと「6」と「10」のすべてに高さを設定する必要があることです。絶対配置は要素をドキュメント フローから除外するため、高さがなければ、重なって奇妙なごちゃごちゃになってしまいます。

正直なところ、スケルトンをそのままにし、マークアップをそのままにしておくと、最も合理的なハックは実際には JavaScript であることがわかります。ページにすでに jQuery がある場合は、さらに簡単です。

于 2012-03-17T02:15:09.703 に答える