Trong email html outlook, float không hoạt động

Question

Tôi muốn bố cục này nơi tôi có một hộp hình chữ nhật. Và bên trong hộp bên trái có một văn bản và bên phải có một hình ảnh. Điều này có vẻ tốt trong trình duyệt, nhưng khi được gửi đi dưới dạng một email html, trong triển vọng các quyền trôi nổi dường như không hoạt động. Nó đặt hình ảnh ở dòng tiếp theo bên dưới văn bản. Bất kỳ ý tưởng về cách thực hiện công việc này? (Tôi đang cố gắng tránh sử dụng các bảng.)

<div style="width: 100%;border-style:solid;overflow: hidden;"> 

    <span style="float: left;"> 
     <h3> Your appointment Details</h3> 
    </span> 
    <span style="float: right;"> 
     <img src="someImage"/> 
    </span> 

</div> 

Answer 1

Khi nói đến HTML, hầu hết các ứng dụng email là nguyên thủy và sẽ phá vỡ nhiều thành phần HTML được tạo tốt.

Tôi muốn giới thiệu một số tài nguyên trực tuyến như:

Làm thế nào để mã email HTML: MailChimp

này SO thảo luận có thể hữu ích:

What guidelines for HTML email design are there?

Answer 2

Đây là một hướng dẫn viên thực sự tốt từ Mail Chimp về Mã hóa cho HTML Emails:

http://kb.mailchimp.com/article/how-to-code-html-emails

Một số lời khuyên cơ bản:

• Sử dụng bảng để bố trí.
• Đặt bảng rộng nhất của bạn rộng tối đa 600px.
• Không thử và sử dụng JavaScript hoặc Flash
• Không sử dụng CSS trong thẻ kiểu vì một số ứng dụng thư khách sẽ loại bỏ nó.
• Chỉ sử dụng kiểu CSS nội tuyến.

Về cơ bản mã email của bạn như thể nó là khoảng năm 2003.

Answer 3

CampaignMonitor cung cấp this rather brilliant guide cho tất cả các hỗ trợ CSS trên nhiều khách hàng email, mà cũng có sẵn như là một pdf hay xls download.

Như câu trả lời ở trên, hỗ trợ qua email cho CSS rất hạn chế, chủ yếu là do Microsoft's descision to use Word as its html rendering engine.

Answer 4

Rất muộn để trò chuyện, nhưng dưới đây là cách "nổi" trong email html bằng cách sử dụng align="" thay thế.

Example here

Ngoài ra, nếu bạn đang tìm kiếm các nguồn lực trên email html (tôi giả sử bạn đang là câu trả lời bạn đánh dấu đúng là rất chung chung), đây là một huge list of resources.

Answer 5

séc ra https://www.campaignmonitor.com/css/ đây nó đã liệt kê được những gì tất cả những điều được hỗ trợ và không được hỗ trợ trong email

Thay vì float bạn có thể sử dụng một bảng bên ngoài và đưa nội dung bạn muốn phao còn lại trong td bên trái của bảng bên ngoài.

đây không phải là một câu trả lời tao nhã nhưng tôi đã làm nó theo cách này

Answer 6

Khi bạn đang nổi một cái gì đó ở bên phải của một cái gì đó yếu tố nổi đúng allways nên apear đầu tiên trong mã. Như thế này:

<div style="width: 100%;border-style:solid;overflow: hidden;"> 
    <img src="someImage" style="float: right;"/> 
    <h3> Your appointment Details</h3> 
</div> 

Answer 7

hình ảnh nổi đơn giản có thể được như

<img src="yourimage" align="left" /> 

NHƯNG như vậy bạn sẽ không có được kết quả vững chắc với đệm giữa văn bản và hình ảnh, triển vọng loại bỏ margin và padding và văn bản của bạn sẽ dính ngay bên cạnh hình ảnh. Vì vậy hãy thử này:

<div style="text-align:justify;"> 

...a lot of text here untill you want to insert an image that floats left... 

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;"> 
     <tr> 
      <td> 
       <img src="yourimage" align="left" vspace="4" /> 
      </td> 
      <td width="15">&nbsp;</td> 
     </tr> 
    </table> 

...a lot more text here until you need an image that floats right... 

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;"> 
     <tr> 
      <td width="15">&nbsp;</td> 
      <td> 
       <img src="yourimage" align="left" vspace="4" /> 
      </td> 
     </tr> 
    </table> 

... a lot more text here... 

</div> 

Bạn cần phải quấn một yếu tố 'bảng' xung quanh nó để có được hiệu quả padding-lề để làm việc trong Gmail, Outlook (trực tuyến), Microsoft Outlook (desktop client), ...

Cung cấp cho bảng thuộc tính align = left hoặc right. (Chỉnh sửa câu trả lời ở đây: ngoài ra và dự phòng cho các ứng dụng email khác cũng cung cấp cho bảng một giá trị float để làm cả hai. Họ là back-up với nhau.Một số khách hàng hiểu "nổi", những người khác hiểu "align", một số hiểu cả hai, ...) Bảng của bạn sẽ trôi nổi trong văn bản gần giống như hình ảnh. Sự khác biệt duy nhất là trong triển vọng một bảng tạo ra một ngắt dòng tự động trong văn bản, nơi một hình ảnh với căn chỉnh trái hoặc phải không tạo ra phá vỡ.

Để đặt lề, vì chúng tôi đang làm việc với một bảng, hãy thêm "td" bổ sung có chiều rộng = "15" ở bên trái hoặc bên phải ô hình ảnh của bạn và không có dấu cách trong đó. (Hoặc một gif transparant -> Spacer.gif)

  

Bạn tốt không để lại ô trống bởi vì nếu chiều rộng của tế bào của bạn sẽ không được tôn trọng trong các email client nhất định

Đối với lề trên và dưới chúng ta có thể sử dụng thuộc tính 'vspace', đừng quên cung cấp cho hình ảnh thuộc tính align = left hoặc right. Nếu không, 'vspace' sẽ không hoạt động.

Answer 8

Tôi đã tìm thấy cách áp dụng float trên Outlook.com.
Chỉ cần viết hoa thẻ như Float: trái.

<span style="Float:left;">Content to float</span> 

Có lẽ bạn nên sử dụng quan trọng quá!;
Tôi đã thử nghiệm và nó hoạt động.