1

私のウェブサイトはランドスケープ モードでデザインされています。1 つの大きな見出しと、レイアウトの中央にメニューとして機能する 2 つの列を持つテーブルがあります。

ただし、サイトが携帯電話で縦向きモードで表示される場合、このレイアウトに使用できる十分なスペースがないため、flexi-background.js ルーチンを使用すると、レイアウトが「圧縮」され、非常に小さくなります。背景は画面上できれいに引き伸ばされています。

理想的な方法は、ポートレート モードが検出された場合、何らかの「手法」によって 2 番目の表の列を 1 番目の列に単純に追加することです。私はPHPでそれを行うことができますが、CSSまたはその他の手法を使用したよりスマートな方法が必要だと感じています-このような要件の経験があり、横向きレイアウトを縦向きモードに調整する方法はありますか?

メタコード:

<table>
<tr>
<td>menu item 1</td> 
<td>menu item 2</td> 
</tr>
<tr>
<td>menu item 3</td> 
<td>menu item 4</td> 
</tr>
<tr>
<td>menu item 5</td> 
<td>menu item 6</td> 
</tr>
<tr>
<td>menu item 7</td> 
<td>menu item 8</td> 
</tr>
</table>

変更後、メニュー項目の「リスト」が 1、3、5、7、2、4、6、8 になる場合は問題ありません。

4

2 に答える 2

2

最初にすべきことは、これにテーブルを使用するという考えを捨てることです。

最近では、とにかくこの種のテーブルを使用することは悪い習慣と考えられていますが、あなたの場合、それは問題の直接の原因でもあります.

CSS には、ボックスを整列するためのいくつかのメカニズムが用意されています。

  1. を使用しfloat:leftます。単一のコンテナ要素を使用して、
    すべてのメニュー項目を要素にします。<div>CSS でメニュー項目を設定float:leftし、特定の固定幅を指定します。多くの列が利用可能なスペースに収まるように、それらは美しく整列します。私は通常、CSS フロートのファンではありませんが、この方法はあなたのような状況のために特別に設計されているため、この場合は良いオプションです。
    参考：http ://css.maxdesign.com.au/floatutorial/

  2. を使用しdisplay:inline-blockます。
    これには、要素を としてレイアウトできるのと同様の効果がありますfloat:left。フロートよりも優れた側面がいくつかありますが、ピクセル単位の精度を実現するのが難しくなる癖もあります。しかし、それは良い解決策でもあります。
    参照: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

于 2012-10-23T21:27:21.410 に答える
2

Spudleyの回答に追加して、コード例を次に示します。CSS2 ソリューションの場合、次のようなことができます (ほとんどの場合、いくつかの微調整が必​​要です。これを非常に高速にまとめただけです)。

  <style type="text/css">
    #main-nav { width: 200px; }
    #main-nav li.menu-item { float:left;list-style-type:none;clear:right;width:75px; }
    #main-nav li.menu-item.clear-item { float:right; }
  </style>
  <ul id="main-nav">
    <li class="menu-item"><a href="#">menu item 1</a></li>
    <li class="menu-item clear-item"><a href="#">menu item 2</a></li>
    <li class="menu-item"><a href="#">menu item 3</a></li>
    <li class="menu-item clear-item"><a href="#">menu item 4</a></li>
    <li class="menu-item"><a href="#">menu item 5</a></li>
    <li class="menu-item clear-item"><a href="#">menu item 6</a></li>
  </ul>

ポートレートとランドスケープに関する質問については、CSS メディア クエリを確認してください (実装は非常に簡単です)。

http://css-tricks.com/css-media-queries/

これは、iPhone やその他のスマートフォンなどの標準的なデバイスに関する優れた記事です。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2012-10-23T21:33:59.370 に答える