响应式表格堆叠

我们正在使用Magento v1.8做一个响应式网站，并且遇到了令问题响应的问题。我尝试过使用div，但无法使其工作。我去了桌子的方法，并在那里有1/2的方式，但仍然遇到一些问题。响应式表格堆叠

这就是我要找来完成：

[___标志____] [___搜索_____] [___ Cart_____]（100％屏幕宽度）

由于分辨率（移动/表）已经将其更改为

[___Logo_______]

[___Search_____]

[___Cart________]

现在，它会崩溃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>

我没有问题，改变格式，样式，等等。我已经试过几乎所有的我在谷歌发现，这里的方法，虽然无论是我做错了什么，或者我想要达到的目标还没有完成。

来源

2014-10-03 Robert Schneeweis

您是否尝试过使用Twitter的引导，或许看着自己的媒体查询，并从那里得到一些指点？ – SnareChops 2014-10-03 04:34:47

你应该只适用于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/

来源

2014-10-03 04:43:02 monkeyinsight

我试过这种方法，但是它会影响本地Magento表，因为头文件被添加到网站的每个页面上。不过谢谢你的建议。 – 2014-10-03 15:32:11

响应式表格堆叠

回答

相关问题