Question

我正在尝试使用标签创建简报以排列数据。我创建了以下代码：

<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
    <p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
        <a href="hyperlink">
            <img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;">
        </a>
        <a href="hyperlink" style="text-decoration:none; color:#00add0; font-weight:600;">text</a>
    </p>
</div>

然而，当我在Outlook邮件中查看此设计时，第二个不会低于第一个，而是与第三个一起进入第一个。

对我可以尝试做什么的任何想法？谢谢！

OB

Answer 1

在新线上添加br标签。 <br />，你甚至可以多次<br /><br />给它额外的空间。

<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
  <p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
    <a href="hyperlink"><br />
      <img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"></a><br />
    <a href="hyperlink" style="text-decoration:none; color:#00add0; font-weight:600;">text</a></p>
</div>

Answer 2

您可以将以下CSS代码添加到div元素中。

clear: both;

以下是JSFiddle的with和without明确：两者;

实际上，忽略这一点。删除浮动：左;来自所有div元素将对技巧进行排序 - JSFiddle

Answer 3

电子邮件的Div是一个选择，电子邮件客户端通常忽略一些css属性来保护它的用户，你应该使用表格（是的，这很可悲但是真的）并且为电子邮件做简单的设计。我想浮动被电子邮件客户端忽略了。

Answer 4

从float:left;样式

中删除div

Answer 5

电子邮件客户端似乎更喜欢表格到div，但div在电子邮件中不一定是“邪恶的”。您不能指望Outlook的HTML呈现引擎表现得像Chrome或FireFox。那么...最不常见的代码，对吧？

<table cellpadding="0" cellspacing="0">
    <tr>
        <td style="width:410px; height:207px; padding:0; margin:0; background-color:#efefef; float:left; text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000">
            <a href="hyperlink" style="text-decoration:none; color:#00add0; font-weight:600; padding-left:10px"><img align="left" src="http://lorempixel.com/output/abstract-h-g-190-207-10.jpg" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"/>text</a>
        </td>
    </tr>
</table>

您的代码可能已接近正常运行。将<td>视为<p>元素，将<table>视为<div>。在某些方面，我认为电子邮件标记更容易（许多限制，更少的选项 - 迫使一个人保持简单）。

由于您的链接都在同一个地方，我将<img>包裹在<a>内，这是合法的。

我认为这应该让你接近。

http://jsfiddle.net/KhE4B/

Div标签不在html中流动

5 个答案: