Div标记没有在html中流动

我正在尝试创建一个时事通讯，使用标签来排列数据。我创建了以下代码：

<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 mail中查看此设计时，第二个并没有低于第一个，而是与第三个一起挤入第一个

我能试着做些什么呢？谢谢

---

OB

在您希望它从新行开始的位置添加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>

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

clear: both;

以下是JSFiddle和clear：两者都有

---

事实上，忽略这一点。移除浮子：左；从所有的div元素将排序技巧-

电子邮件的Divs是一个baaad选择，电子邮件客户端通常忽略一些css属性以保护其用户，您应该使用表（是的，这是令人伤心但真实的），并对电子邮件进行简单的设计。我猜浮动被电子邮件客户端忽略了。

只需删除

float:left

from

div

style

电子邮件客户端似乎更喜欢表格而不是div，但div在电子邮件中并不一定是“邪恶的”。你不能期望Outlook的HTML呈现引擎表现得像Chrome或FireFox。那么…最不常见的denom的代码，对吗

<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>

您的代码可能已经接近正常工作了。将

视为您的

元素，将

视为

。在某些方面，我认为电子邮件标记更容易（有很多限制，选项更少——迫使人们保持简单）

---

由于您的两个链接都指向同一个位置，我将您的

包装在

中，这不是一个解决方案，但是您忘记了自动关闭img元素，这可能会在呈现HTML时导致错误。它应该以/>，而不是>，结束。另外，我认为您不需要用两种不同的语言指定图像的宽度，您可能应该坚持使用HTML描述。你也可以考虑做一个简单的风格部分，而不是元素，例如P.1 {文本对齐：左边；字体家族：Arial，SAN-serif；…} P.2 {…}使用id＝“=”“使用”。对于CLASS=“”@CS\u，许多电子邮件中都会删除STEM样式。为了得到一致的结果，你必须在电子邮件中使用内联样式。我不知道，谢谢。表格是处理电子邮件的方式。你必须像90年代那样编码。