响应式表格堆叠
问题描述:
我们正在使用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>
我没有问题,改变格式,样式,等等。我已经试过几乎所有的我在谷歌发现,这里的方法,虽然无论是我做错了什么,或者我想要达到的目标还没有完成。
答
你应该只适用于table, td, tr
display: block
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table, tr, td {
display: block;
}
}
+0
我试过这种方法,但是它会影响本地Magento表,因为头文件被添加到网站的每个页面上。不过谢谢你的建议。 – 2014-10-03 15:32:11
您是否尝试过使用Twitter的引导,或许看着自己的媒体查询,并从那里得到一些指点? – SnareChops 2014-10-03 04:34:47