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、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 回答