【发布时间】:2021-08-02 23:55:40
【问题描述】:
我正在构建一个响应式表格,其中包含以下分布中的三个元素:
[![这是它在桌面上的样子][1]][1]
但是,我需要调整它以使其在移动设备上看起来像这样:
[![这在手机上应该是什么样子][2]][2]
到目前为止,这是我的代码:
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="background: #ffffff; padding: 0px 50px 20px 50px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- LIST ITEM -->
<tr>
<td style="width: 60px; height: auto; padding: 0px 0px 0px 0px; " valign="middle" width="121">
<img alt="" border="0" class="verticalAlignTop" height="121" src="https://i0.wp.com/www.un.org/pga/73/wp-content/uploads/sites/53/2018/09/Dummy-image-1.jpg?ssl=1" style="width: 121px; height: 121px;" valign="middle" width="121"></td><td style="vertical-align: top; padding: 0px 0px 0px 20px; text-align: left; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: 400; display: block" valign="top">
<h3 style="font-size: 18px; line-height: 25px; margin: 0px 0px 0px 0px; mso-line-height-rule: exactly; font-weight: 700; color: #333333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</h3></td> <td style="vertical-align: bottom; padding: 20px 0px 0px 20px; text-align: left; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: 400; display: inline-block" valign="bottom">
<p style="font-size: 15px; line-height: 22px; margin: 0px 0px 0px 0px; mso-line-height-rule: exactly;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum </p></td> </tr>
</table></td></tr></table></td></tr></table>
如果有人有任何想法,将不胜感激!
提前致谢! [1]:https://i.stack.imgur.com/QC3Q7.png [2]:https://i.stack.imgur.com/yGqV9.png
【问题讨论】:
标签: html css responsive-design