Question

我有两列结构。左侧保持一个图像的左侧，右侧保持同一图像的右侧。我这样做是为了让用户可以点击左边指向一个地方，右边指向另一个地方。

这是它的样子：

CSS

<style type="text/css">
    body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
    table {border-collapse: collapse;}
    table.fixed { table-layout:fixed; }
    table.fixed td { overflow: hidden; }

    @media only screen and (max-width: 640px)  {
                body[yahoo] .deviceWidth {width:440px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
        }

    @media only screen and (max-width: 479px) {
                body[yahoo] .deviceWidth {width:280px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
        }
</style>

HTML

<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff">
<tr>
    <td class="center" style="padding:0px 0 0 0px">
        <table width="50%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                <tr>
                    <td style="padding: 0px 0px 12px 0px" align="center">
                        <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="blah"><img width="290" src="blah" alt="" border="0" style="width: 290px" class="deviceWidth" /></a></td>
                    </td>
                </tr>                        
            </table>                                       
        <table width="50%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
            <tr>
                <td style="padding: 0px 0px 12px 0px" align="center">
                    <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="blah2"><img width="290" src="blah2" alt="" border="0" style="width: 290px" class="deviceWidth" /></a>
                </td>
            </tr>                        
        </table>                                        
    </td>
</tr>
</table>

问题是......我想让它变得敏感。但是，不是将一个表堆叠在另一个表的顶部，而是希望它们并排收缩，以便保留图像。我怎样才能做到这一点？

编辑：

这是一个小提琴：

http://jsfiddle.net/54c5W/

当我缩小屏幕时，我希望这些图像能够并排放置，而不是叠在一起。

响应表：2列表与l + r图像...缩小它？

0 个答案: