响应式html简报,包含bootstrap等表格

时间:2015-11-11 18:46:13

标签: html css twitter-bootstrap html-table newsletter

我想发送回复的简报。我知道如何使用我的style.css

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff">

 <tbody> 
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody> 
                    <tr>
                        <td style="padding:15px;background-color:#fff">

                        image

                        </td>

                    </tr>
                </tbody>
            </table>
       </td>
       <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
            <tbody>
                <tr>
                    <td style="padding:15px;background-color:#fff">
                        text
                    </td>

                </tr>
            </tbody>
        </table>
       </td>    
    </tr>   
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody>
                    <tr>    
                        <td style="padding:15px;background-color:#fff">
                            text
                        </td>

                    </tr>
                </tbody>
            </table>
        </td>

    </tr>    



 </tbody>
</table>

但我有一个问题。

在桌面看起来很棒,

image                    text
text                     image

但在手机中

看起来

image
text
text
image

我希望它像

image
text
image
text

我找到了Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3,我想知道表格中是否有类似内容。

我尝试使用align="center"aling="left"更改align="right",但没有。

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

不是通过使用两个表格单元格(td)来获得并排效果,而是需要使每一面成为整个表格,并使用{{ 1}}表上的属性。这样,当电子邮件转到一列时,您可以按任意顺序排列左侧或右侧。

Julie Ng的Antwort模板有一个很好的描述+这种技术的例子:

https://github.com/InterNations/antwort/wiki/Columns-to-Rows-%28Version-1.0%29