跨屏幕尺寸的子元素垂直对齐难题及解决方案
使用浮动布局的页面，在小屏幕上子元素能完美垂直对齐，但在较大屏幕上却出现对齐问题。
高效解决方案：采用Flexbox布局
通过将浮动布局替换为Flexbox布局，并合理设置子元素高度和边距，即可轻松解决此问题。
以下代码示例展示了如何利用Flexbox实现跨屏幕尺寸的子元素垂直对齐：
.type {
display: flex; /* 使用Flexbox布局 */
flex-direction: row; /* 水平排列子元素 */
/* ...其他样式... */
}
.type > div {
width: 48%;
height: 100%; /* 子元素占据容器的全部高度 */
}
.type > div > div {
margin-bottom: 10px;
height: calc(33.33% - 7px); /* 动态计算高度，减去边距 */
}
通过Flexbox的特性，子元素将自动适应容器大小并垂直对齐，确保在不同屏幕尺寸下都能保持一致的视觉效果。 calc() 函数则根据容器高度动态计算子元素高度，避免因边距影响对齐。
