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提供了几种机制来对齐适合您的方框。

使用float:left。
使用单个容器元素将所有菜单项设置为<div>个元素。在CSS中将菜单项设置为float:left，并为它们指定特定的固定宽度。它们将精美地排列成适合可用空间的多列。我通常不喜欢CSS浮动，但在这种情况下，它是一个不错的选择，因为这种方法是专为像你这样的情况设计的。
参考：http://css.maxdesign.com.au/floatutorial/
使用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/

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

2 个答案: