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

我的网站是以横向模式设计的——一个大标题和一个位于布局中心的表格，有两列作为菜单

但是，如果站点以纵向模式显示在手机上，则此布局的可用空间远远不够，因此使用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
菜单项2
菜单项3
菜单项4
菜单项5
菜单项6
菜单项7
菜单项8

---

如果更改后，菜单项的“列表”将是1、3、5、7、2、4、6、8，那就没问题了。

首先要做的是放弃使用表格来完成此操作的想法

这几天使用表处理这类事情被认为是不好的做法，但在您的情况下，这也是问题的直接原因

CSS提供了几种机制来对齐适合您的框

使用

float:left

使用单个容器元素将所有菜单项设置为

元素。在CSS中将菜单项设置为

float:left

，并为它们指定一个特定的固定宽度。它们将漂亮地排列成许多列，以适应可用空间。我通常不喜欢CSS浮动，但在这种情况下，它是一个很好的选择，因为这种方法是专门为您这样的情况设计的。
参考：

使用

显示：内联块


这具有类似的效果，允许您将元素布局为
float:left
。它有一些方面比浮点更好，但也有一些怪癖，使它很难获得完美的像素精度。但这也是一个很好的解决方案。

参考：

---

要做的第一件事就是放弃用桌子来做这个的想法

这几天使用表处理这类事情被认为是不好的做法，但在您的情况下，这也是问题的直接原因

CSS提供了几种机制来对齐适合您的框

使用

float:left

使用单个容器元素将所有菜单项设置为

元素。在CSS中将菜单项设置为

float:left

，并为它们指定一个特定的固定宽度。它们将漂亮地排列成许多列，以适应可用空间。我通常不喜欢CSS浮动，但在这种情况下，它是一个很好的选择，因为这种方法是专门为您这样的情况设计的。
参考：

使用

显示：内联块


这具有类似的效果，允许您将元素布局为
float:left
。它有一些方面比浮点更好，但也有一些怪癖，使它很难获得完美的像素精度。但这也是一个很好的解决方案。

参考：

---

除了Spudley的答案之外，下面是示例代码。对于CSS2解决方案，您可以使用类似的方式（最需要调整的是，快速组合起来）：

#主导航{宽度：200px；}
#main nav li.menu-item{float:left；列表样式类型：none；clear:right；width:75px；}
#主导航li.menu-item.clear-item{float:right；}

关于肖像和风景的问题，请查看CSS媒体查询（它们很容易实现）：

这里有一篇关于标准设备的好文章，比如iPhone和其他智能手机：

---

在Spudley的答案中添加以下示例代码。对于CSS2解决方案，您可以使用类似的方式（最需要调整的是，快速组合起来）：

#主导航{宽度：200px；}
#main nav li.menu-item{float:left；列表样式类型：none；clear:right；width:75px；}
#主导航li.menu-item.clear-item{float:right；}

关于肖像和风景的问题，请查看CSS媒体查询（它们很容易实现）：

这里有一篇关于标准设备的好文章，比如iPhone和其他智能手机：

---

第1步：不要将表格用于布局。第1步：不要将表格用于布局。我尝试了您的代码，谢谢！但是，这涉及到一个问题，即如果可用宽度小于示例中的200px，则菜单项将“混合”（右栏中的项将与左栏中的项“合并”）--但如果可用的屏幕宽度不足以以“宽”格式容纳两列，则我需要将右列的所有项目追加到左列的项目。对不起，或者我的英语有限，我希望这次我解释得更好。我试过你的代码，谢谢！但是，它涉及到一个问题，即如果可用宽度小于示例中的200px，那么菜单项将是“混合”的（右栏中的项将与左栏中的项“合并”）——但是如果可用，我需要将右栏中的所有项附加到左栏中的项

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