CSS重新排列電子郵件中的文本？

-1

我在編輯電子郵件。我有下面的東西。有沒有一種方法可以使用CSS重新排列下面的內容，看起來像下面的輸出？CSS重新排列電子郵件中的文本？

<span id="one">One</span> 
Hello friend 
<span id="three">Three</span> 
Hello friend 2 
<span id="five">Five</span> 
Hello friend 3 
<span id="two">Two</span> 
Hello friend 4 
<span id="four">Four</span>

輸出

一個

這位朋友你好

兩個

這位朋友你好2

三

這位朋友你好3

四

這位朋友你好4

五

來源

2017-07-17 aaandy

您可以將內聯CSS用於您的電子郵件。 – Sudarsh

ID **必須是唯一的。試試類。你嘗試過哪些CSS？ – j08691

我改變了ID是唯一的 – aaandy

您可以使用CSS 控制文檔的渲染與文檔順序不同。我會使用flexbox（display：flex）。但是，它也依賴於一定的規則結構到您的HTML，這不是我在示例中看到的。不知道你是否有能力修改或不修改。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.first { 
 
    order: 1; 
 
} 
 

 
.second { 
 
    order: 2; 
 
} 
 

 
.third { 
 
    order: 3; 
 
} 
 

 
.forth { 
 
    order: 4; 
 
} 
 

 
.fifth { 
 
    order: 5; 
 
}

<div class="container"> 
 
    <div class="first"> 
 
    <span>This is the first</span> 
 
    </div> 
 
    <div class="third"> 
 
    <span>This is the third</span> 
 
    </div> 
 
    <div class="fifth"> 
 
    <span>This is the fifth</span> 
 
    </div> 
 
    <div class="second"> 
 
    <span>This is the second</span> 
 
    </div> 
 
    <div class="forth"> 
 
    <span>This is the forth</span> 
 
    </div> 
 
</div>

來源

2017-07-17 18:51:23 flyer

這是忽略OP示例中跨度之間的「hello friend」文本。 –

@JonB OP只需將文本放入'div。{number}' –

據我知道的，沒有。沒有辦法用CSS來做到這一點。

問題是，CSS的目的是'美化'DOM結構，但不能改變它。它看起來像你正在構建的DOM結構的方式，你無法預測的因素在未來的順序。

來源

2017-07-17 18:43:42

我想在理論上你可以將每個元素硬編碼爲'position：absolute'並且設置一個'top'值，它對應於它應該垂直放置的位置，但這非常不可靠。 –

-2

嘗試添加這對你的CSS

span{ 
    display:block; 
}

來源

2017-07-17 18:47:39

這並不改變我看到的訂單 –

。我沒有看到中間的5個。塊顯示將爲他執行換行符。 js可以用來排序。 –

這不提供問題的答案。要批評或要求作者澄清，請在其帖子下方留言。 - [來自評論]（/ review/low-quality-posts/16740017） – Ortund

簡短的答案是否定的。

這需要使用每個電子郵件客戶端不支持的CSS屬性和/或HTML屬性。有關更多詳細信息，請參見campaign monitor list of supported CSS properties。

電子郵件的編碼不像編碼網頁。您實際上僅限於使用主要客戶端普遍支持的CSS屬性和HTML屬性。電子郵件中使用諸如彈出框和其他花哨的CSS3屬性並不總是可靠的。

此外，將CSS文件重新排序（除非絕對必要）幾乎不是一個好習慣。它可能會造成嚴重的可用性問題。

來源

2017-07-17 18:51:40 Josh

這裏有關在電子郵件中使用flexbox的一些注意事項： https://litmus.com/community/discussions/1500-using-flexbox-in- an-email – Josh

主要Web郵件服務器不支持Flex。 – derloopkat

CSS重新排列電子郵件中的文本？

回答

相關問題