本文旨在解决在Apple设备上使用Flexbox布局时，包含图像的Div元素占据100%宽度，导致与文本Div元素无法正确并排对齐的问题。通过分析HTML结构和CSS样式，我们将重点关注类名定义不一致的问题，并提供相应的修复方案，确保在所有浏览器中都能实现预期的布局效果。
问题分析
在您提供的代码片段中，您尝试使用Flexbox布局将包含图像的div和包含文本的div并排显示。然而，在Apple设备上，图像所在的div占据了100%的宽度，导致文本div被挤到下方。您提到已经尝试过设置文本div的宽度为100%，但没有解决问题。
问题的关键在于CSS类名定义不一致。您在HTML中使用了class="site-logo-thumbnail"，而在CSS中使用了.site - logo - thumbnail（包含空格）。CSS会将.site - logo - thumbnail解析为多个类名，而不是一个单独的类名，导致样式规则无法正确应用到对应的HTML元素上。
解决方案
解决此问题的关键是确保HTML和CSS中使用相同的类名。将CSS中的类名.site - logo - thumbnail修改为.site-logo-thumbnail，与HTML中的类名保持一致。
立即学习“前端免费学习笔记（深入）”；
修改后的CSS代码如下：
.site-logo-thumbnail {
max-height: 48px;
display: flex;
justify-content: center;
align-items: center;
height: 48px;
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}代码解释:
- .site-logo-thumbnail: 这个类名用于包裹图像的 div 元素，用于控制图像的显示方式。
- max-height: 48px: 设置图像的最大高度为 48px。
- display: flex: 使用 Flexbox 布局，使 div 元素内部的子元素可以灵活地排列。
- justify-content: center: 将子元素在水平方向上居中对齐。
- align-items: center: 将子元素在垂直方向上居中对齐。
- height: 48px: 设置图像的高度为 48px。
- img: 这个选择器用于选择 site-logo-thumbnail 类名下的 img 元素。
- height: 100%: 设置图像的高度为父元素的高度。
- width: 100%: 设置图像的宽度为父元素的宽度。
- object-fit: contain: 确保图像在保持宽高比的前提下完全显示在容器中，可能会出现留白。
完整示例
<div class="d-flex align-items-center my-2">
<div class="mr-2">
<span *ngIf="companyData$ | async as companyData">
<sc-site-logo-image
*ngIf="site.display_image.indexOf('/images/site.png') !== -1"
[displayImage]="companyData.company_logo_uri"
>
</sc-site-logo-image>
</span>
<div class="site-logo-thumbnail" *ngIf="image !== 'data:'">
<img alt="" [src]="image" />
</div>
</div>
<div>
<div class="font-weight-bolder"> {{ site.display_name }}</div>
</div>
</div>.site-logo-thumbnail {
max-height: 48px;
display: flex;
justify-content: center;
align-items: center;
height: 48px;
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}注意事项与总结
- 类名一致性： 确保HTML和CSS中使用完全一致的类名，这是CSS样式生效的基础。
- Flexbox布局： Flexbox布局是实现元素并排排列的常用方法，理解其属性（如display: flex，align-items，justify-content）对于灵活控制元素布局至关重要。
- 图像处理： object-fit: contain属性可以确保图像在容器中完整显示，避免变形或裁剪。
- 浏览器兼容性： 尽管此问题主要出现在Apple设备上，但在所有浏览器中保持代码一致性是最佳实践。
通过修正CSS类名定义不一致的问题，并结合Flexbox布局，您应该能够成功解决在Apple设备上Div元素对齐的问题，实现预期的布局效果。在开发过程中，仔细检查类名和CSS规则，可以避免许多潜在的样式问题。
