问题描述
我正在创建一个 HTML 电子邮件模板。在那里我有一个包含 3 列的部分。当我在本地机器上运行它时,我没有遇到任何问题,但是当我将它作为邮件发送时,我在响应或其他任何我能理解的事情上遇到了麻烦。
- 首先,我使用 SASS 和编译器将其编译为 CSS。
- 制作另一个HTML 文件并获取已编译的 CSS 代码。
- 在 标签中,我将 CSS 代码设置为 (内部 CSS)。
- 它在我的本地机器中显示为我想要的样子。大小设备完美。喜欢
https://codepen.io/mrhrifat/pen/xxgBQZd?editors=1100
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>rating</title>
<style>
/*===== 05) Global CSS Section =====*/
.btn,.container .latest .row .col1 .card-footer button,.container .latest .row .col2 .card-footer button,.container .latest .row .col3 .card-footer button {
border: none;
cursor: pointer;
background-color: red;
padding: 15px 30px;
border-radius: 4px;
line-height: 120%;
}
.btn a,.container .latest .row .col1 .card-footer button a,.container .latest .row .col2 .card-footer button a,.container .latest .row .col3 .card-footer button a {
text-decoration: none;
color: white;
font-size: 14px;
line-height: 140%;
text-align: center;
}
/*===== 06) Container Section =====*/
html,body {
margin: 0;
padding: 0;
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.container {
width: 100%;
max-width: 650px;
margin: 0 auto;
/*===== 08) Latest Section =====*/
}
.container .latest .row {
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
display: -ms-grid;
display: grid;
grid-template-areas: 'sec1 sec2 sec3';
-ms-grid-columns: auto auto auto;
grid-template-columns: auto auto auto;
}
.container .latest .row .col1 {
padding: 5px;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: sec1;
text-align: center;
}
.container .latest .row .col1 .card-body small {
display: block;
font-size: 14px;
padding: 10px 10px 0;
}
.container .latest .row .col1 .card-body p {
padding: 10px 5px;
font-size: 14px;
margin: 0;
color: green;
}
.container .latest .row .col1 .card-body span {
border-top: 2px solid black;
padding: 10px 15px;
display: block;
width: 20%;
margin: 0 auto;
}
.container .latest .row .col1 .card-footer button {
padding: 12px 22px;
}
.container .latest .row .col2 {
padding: 5px;
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: sec2;
text-align: center;
}
.container .latest .row .col2 .card-body small {
display: block;
font-size: 14px;
padding: 10px 10px 0;
}
.container .latest .row .col2 .card-body p {
padding: 10px 5px;
font-size: 14px;
margin: 0;
color: green;
}
.container .latest .row .col2 .card-body span {
border-top: 2px solid black;
padding: 10px 15px;
display: block;
width: 20%;
margin: 0 auto;
}
.container .latest .row .col2 .card-footer button {
padding: 12px 22px;
}
.container .latest .row .col3 {
padding: 5px;
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: sec3;
text-align: center;
}
.container .latest .row .col3 .card-body small {
display: block;
font-size: 14px;
padding: 10px 10px 0;
}
.container .latest .row .col3 .card-body p {
padding: 10px 5px;
font-size: 14px;
margin: 0;
color: green;
}
.container .latest .row .col3 .card-body span {
border-top: 2px solid black;
padding: 10px 15px;
display: block;
width: 20%;
margin: 0 auto;
}
.container .latest .row .col3 .card-footer button {
padding: 12px 22px;
}
/*===== 15) Media Query Section =====*/
@media screen and (max-width: 365px) {
.latest .row {
grid-template-areas: 'sec1''sec2''sec3' !important;
}
}
/*# sourceMappingURL=style.css.map */
</style>
</head>
<body>
<!-- Container Section Start -->
<div class="container">
<!-- Latest Section Start -->
<section class="latest">
<div class="row">
<div class="col1">
<div class="card">
<div class="card-body">
<small>rating</small>
<p>
Lorem Ipsum is simply dummy text of typesetting industry.
</p>
</div>
<div class="card-footer">
<button>
<a href="#">Download Now</a>
</button>
</div>
</div>
</div>
<div class="col2">
<div class="card">
<div class="card-body">
<small>rating</small>
<p>
Lorem Ipsum is simply dummy text of typesetting industry.
</p>
</div>
<div class="card-footer">
<button>
<a href="#">Download Now</a>
</button>
</div>
</div>
</div>
<div class="col3">
<div class="card">
<div class="card-body">
<small>rating</small>
<p>
Lorem Ipsum is simply dummy text of typesetting industry.
</p>
</div>
<div class="card-footer">
<button>
<a href="#">Download Now</a>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Latest Section End -->
</div>
<!-- Container Section End -->
</body>
</html>