phpmailer html의 div 옆에 div를 넣으십시오.

debugcn 에 게시 Dev

브루노 핀토

phpmailer 메일 링의 html 구조를 만들려고하는데 3 개의 div를 나란히 보내고 싶지만 형식이 지정된 이메일을받을 때.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='display: table; width: 60%'>
<div style='font-size: 1vw; background-color: whiteSmoke; text-align: center; padding: 1vw; position: relative;'><b>PEDIDO DE ASSISTÊNCIA</b></div>
<div style='display: flex; align-items: flex-start;'>
    <div style='width: 38%;'>
	    <p><b>Cliente:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>                                  
		<p><b>Morada:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>                                           
		<p><b>Código Postal:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        <p><b>Localidade:</b>  xxxxxxxxxxxxxxxxxxx</p>		
		<p><b>Data do Pedido:</b>  21-11-2019</p> 
	</div>
    <div style='width: 30%;'>
		<p><b>Assistência Pedida Por:</b>  xxxxxxxxxxxxxxxxxxxxxxxxx</p>
	</div>
	<div style='width: 25%;'>
		<p><b>Nº Contribuinte:</b>  xxxxxxxxxxxxxxxx</p>
		<p><b>Contacto:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p><b>Email:</b>  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
	</div>
</div>
</div>

여기에서 작동하고 html 페이지에 있지만 이메일을 보내고 Outlook에서 수신하면 구성되지 않은 것처럼 보이며 이미지에 표시됩니다.

div는 위에 넣은 예제와 같이 나란히 있지 않습니다.

싱크로

이메일에 HTML에서 자바 스크립트와 비교적 최근의 CSS (flexbox)를 모두 사용하려고합니다. 작동하지 않을 것입니다.

이메일의 HTML은 매우 제한적이며, 특히 gmail과 함께 끔찍하게 구식의 2 등급 경험을 제공하는 Outlook에서 더욱 그렇습니다. 서식을 매우 단순하게 유지하고 (예, 레이아웃을위한 표!) emailonacid 및 litmus와 같은 서비스를 사용하여 여러 장치에서 모든 것을 테스트해야합니다.

이메일 용 HTML을 개발하는 것은 매우 불편하지만 환영합니다.

레이아웃이 표를 에뮬레이트하려고하기 때문에 표를 사용하는 것이 더 쉬울 것입니다.

<table style='width: 60%'>
    <tr style='background-color: whiteSmoke; text-align: center; padding: 1em; position: relative;'>
        <th colspan="3"><b>PEDIDO DE ASSISTÊNCIA</b></th>
    </tr>
    <tr>
        <td style='width: 38%;'>
            <p><b>Cliente:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Morada:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Código Postal:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Localidade:</b> xxxxxxxxxxxxxxxxxxx</p>
            <p><b>Data do Pedido:</b> 21-11-2019</p>
        </td>
        <td style='width: 30%;'>
            <p><b>Assistência Pedida Por:</b> xxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </td>
        <td style='width: 25%;'>
            <p><b>Nº Contribuinte:</b> xxxxxxxxxxxxxxxx</p>
            <p><b>Contacto:</b> xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p><b>Email:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </td>
    </tr>
</table>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

phpmailer html의 div 옆에 div를 넣으십시오.

phpmailer html의 div 옆에 div를 넣으십시오.

HTML, CSS : 옆에 2div?

div 후에 종료되면 div를 제거하고 기본 div 안에 넣으십시오.

옆에있는 div 안에 div를 표시합니다.

옆에 div의 크기를 나누는 Div

contenteditable div의 각 행 옆에 행 번호를 표시하는 방법

Matplolit의 모든 줄에 대한 범례를 넣으십시오.

너비가 정의되지 않은 다른 div 옆에 div를 표시하는 방법은 무엇입니까?

커서 옆에 Div

html을 에코에 넣으십시오.

한 div를 다른 div 옆에 배치

HTML5 캔버스 옆에 div를 배치하는 방법

html 양식 옆에 div를 삽입하는 방법

.txt에서 텍스트를 가져 와서 html에 넣으십시오.

두 개의 div를 다른 옆에 배치하는 CSS

동적으로 생성 된 div의 이미지 옆에 텍스트를 중앙에 배치합니다. jQuery

ReactJS의 ContentEditable Div에서 Enter 키를 중단하십시오.

두 개의 html 요소를 사용자 정의 CSS와 같은 줄에 넣으십시오.

CSS / PHP : 대신 옆에 다음 div를 표시하는 방법

메인 div를 사이드 바 옆에 표시하는 방법

다른 div 옆에 절대 div를 배치하는 CSS (순수 CSS 팝 오버)

난수를 div에 넣은 다음 div를 순서대로 삭제하십시오. 어떻게?

OnClickButton의 도움으로 DIV를 다른 DIV로 교체하십시오.

사이드 바 확장 html의 선택된 요소에 xpath를 넣으십시오.

ajax의 성공 기능에서 html 파일의 div를 다시로드하십시오.

5 개의 유체 DIV 옆에 고정 DIV

div를 표시하고 hover jQuery html에 계속 표시하십시오.

자바 스크립트를 사용하여 HTML에서 동일한 <div>의 수를 계산하십시오.

URL 해시가 div의 ID와 일치하면 div의 자식에게 무언가를하십시오.

이미지 옆에 Div