CSS：1 或 2 个表格列，取决于横向/纵向模式

Question

我的网站采用横向模式设计 - 一个大标题和一个位于布局中心的表格，两列用作菜单。

但是，如果站点在手机上以纵向模式显示，则到目前为止还没有足够的空间可用于此布局，因此使用 flexi-background.js 例程，布局被“压缩”并变得非常，非常小，而背景在屏幕上被很好地拉伸了。

如果检测到纵向模式，理想的方法是通过某种“技术”简单地将第二个表格列附加到第一列。我可以用 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 就可以了。

Answer 1

首先要做的是放弃使用表格的想法。

如今，无论如何都将表格用于此类事情被认为是一种不好的做法，但在您的情况下，这也是问题的直接原因。

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/

Answer 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/