本文旨在解决在Apple设备上，包含图片和文本的两个Div元素在同一行对齐时，图片Div占据100%宽度导致布局错乱的问题。通过分析HTML和CSS代码，找出问题根源，并提供有效的解决方案，确保在各种浏览器和设备上都能实现正确的对齐效果。
问题分析
在前端开发中，经常会遇到需要将图片和文本并排显示的需求。通常情况下，使用Flexbox可以轻松实现。然而，在某些情况下，尤其是在Apple设备上，可能会出现图片Div占据过多宽度，导致文本被挤到下一行的问题。
根据提供的代码，问题可能出在CSS样式类的定义上。仔细检查HTML和CSS代码，发现.site-logo-thumbnail类在CSS文件中被错误地定义为.site - logo - thumbnail，导致样式未生效。
解决方案
解决此问题的关键在于确保CSS样式类的定义与HTML中使用的类名完全一致。
-
修正CSS类名： 将CSS文件中的.site - logo - thumbnail更正为.site-logo-thumbnail。
.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结构： 确保HTML结构正确使用了Flexbox布局。
@@##@@{{ site.display_name }} -
确保图片自适应： object-fit: contain; 确保图片在容器内完整显示，并保持宽高比。
.site-logo-thumbnail img { height: 100%; width: 100%; object-fit: contain; }
其他注意事项
- 浏览器缓存： 修改CSS后，请清除浏览器缓存或强制刷新页面，以确保新的样式生效。
- 响应式设计： 在不同的屏幕尺寸下，可能需要调整样式，以适应不同的设备。可以使用媒体查询来实现响应式设计。
- 调试工具： 使用浏览器的开发者工具可以帮助你检查元素的样式和布局，从而更好地定位问题。
总结
解决Apple设备上Div元素对齐问题，关键在于确保CSS样式类的正确定义，并合理使用Flexbox布局。通过仔细检查代码，并遵循上述步骤，可以有效地解决此类问题，并确保在各种浏览器和设备上都能获得一致的显示效果。
