堆叠的响应式表

Question

我们正在使用 Magento v1.8 制作一个响应式网站，但遇到了一个使标题响应式的问题。我尝试过使用 div，但无法使其正常工作。我使用了 table 方法并将其设置为 1/2，但仍然遇到了一些问题。

这就是我想要完成的：

[___Logo____][___Search_____][___Cart_____]（100% 屏幕宽度）

随着分辨率（移动/桌子）的变化

[___标志_______]

[___搜索____]

[___购物车________]

就目前而言，它将折叠 3/4 并且购物车离开屏幕，如果我将它一直缩小，那么它们会堆叠（尽管对齐已关闭。

这是我目前所拥有的：

<style>


@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class=headermobilewrapper]{width:100%!important; height:auto!important;}
*[class=w320]{width:320px!important; height:auto!important;}
*[class=split]{width:320px!important; float:left!important; display:block !important;}  



</style>


 <?php $config = Mage::getStoreConfig('themessettings', $_GET['store']); ?>


 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="headermobilewrapper" align="center" bgcolor="#f3faf0">
   <tr>
     <td style="vertical-align:middle" class="split"> <a href="http://dev2"><img src="/images/header/header_logo.gif" ></a> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('topSearch'); ?> </td>
     <td style="vertical-align:middle" align="center" class="split"> <?php echo $this->getChildHtml('cartTop') ?> </td>
   </tr>
 </table>

我在更改格式、样式等方面没有问题。我尝试了几乎所有在 Google 上找到的方法，在这里，虽然我做错了什么，或者我想要实现的目标不存在还没有。

Answer 1

你应该只申请table, td, trdisplay: block

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    table, tr, td {
        display: block;
    }
}

http://jsfiddle.net/3ernd8up/