【问题标题】：HTML - vertical align responsive imagesHTML - 垂直对齐响应图像
【发布时间】：2021-07-11 18:05:35
【问题描述】：
我正在为纯 HTML 和 css 的电子邮件制作模板
这是我的实际结果
我需要 3 张图片表示好，3 张图片表示不好
但现在我需要做这样的事情
我的问题是如何为具有预期结果的响应式容器构建结构。
这是我的一些实际代码
.column {
float: left;
width: 30%;
padding: 15px;
}
.col-50 {
float: left;
width: 50%;
margin-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
<div class="row">
<div class="col-50 text-center">
<img width="250" height="250" src="base64code" alt=\"good\">
<img width="250" height="250" src="base64code" alt="good">
</div>
<div class="col-50 text-center">
<img width="250" height="250" src="base64code" alt=\"good\">
<img width="250" height="250" src="base64code" alt="good">
</div>
</div>
"
但它不起作用，我不知道我做错了什么。
【问题讨论】：
标签：
javascript
html
css
templates
styles
【解决方案1】：
创建上面的页面有很多布局。
使用 CSS Grid 系统的一种可能解决方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<link rel="stylesheet" href="style.css" />
<title>Vertical Align</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
text-align: center;
font-size: 30px;
margin: 25px 50px;
padding: 50px 25px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Good 1</div>
<div>No Good 1</div>
<div>Good 2</div>
<div>No Good 2</div>
<div>Good 3</div>
<div>No Good 3</div>
<div>Good ...</div>
<div>No Good ...</div>
</div>
<script src="index.js" type="module"></script>
</body>
</html>
【解决方案2】：
试试这个：
img{
display:block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row m-auto">
<div class="col-xs">
<h1>Header</h1>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
</div>
<div class="col-xs">
<h1>Header</h1>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
</div>
</div>
【解决方案3】：
因为您提到这将用于 HTML 电子邮件，所以我的建议是使用不太现代的编码风格并使用表格构建电子邮件。原因是，电子邮件从来没有很好的 html 和 css 支持，并且仍然存在现代网站永远不会遇到的简单设计问题。
根据您想要支持的电子邮件客户端，您可能会遇到以下类型的问题：
- head 标签中的 CSS 将被忽略
- 链接 rel="stylesheet"... 将从电子邮件中删除（不会被使用）
- div 标签的宽度将是 100%，即使您尝试以其他方式设置样式
- 忽略边距样式（我总是使用填充代替电子邮件）
关于哪些电子邮件客户端允许使用不同的样式有很多规则，最好的办法始终是将样式直接内联到 html 标签上。您可以在这里找到一个非常方便的指南，了解哪些是允许的，哪些是不允许的：https://www.campaignmonitor.com/css/
对于您上面的示例，我会将其转换为如下表格：
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="50%" align="center">
<img width="250" height="250" src="https://via.placeholder.com/250" alt="good" style="display: block;">
<img width="250" height="250" src="https://via.placeholder.com/250" alt="good" style="display: block;">
<img width="250" height="250" src="https://via.placeholder.com/250" alt="good" style="display: block;">
</td>
<td width="50%" align="center">
<img width="250" height="250" src="https://via.placeholder.com/250" alt="good" style="display: block;">
<img width="250" height="250" src="https://via.placeholder.com/250" alt="good" style="display: block;">
<img width="250" height="250" src="https://via.placeholder.com/250" alt="good" style="display: block;">
</td>
</tr>
</table>
然后您可以向图像添加填充以允许它们之间的垂直空间（电子邮件中的边距不是很好）。
如果您需要更改图像的宽度以实现响应式目的，您可以在头部使用媒体查询。大多数移动电子邮件客户端将正确读取电子邮件头中的媒体查询，并将在图像上正确使用百分比宽度（容器的百分比而不是图像尺寸的百分比），因此对于移动设备，您可以为图像提供 % 宽度以更好地使用空间。
@media (max-width: 599px){ //Assuming desktop is 600px+
img{
width: 100% !important;
}
}
遗憾的是，由于内联样式，这需要使用 !important 标签。