css浮动元素垂直对齐及跨屏适配方案
本文探讨如何使用CSS有效对齐浮动元素中的列表项，并确保其在各种屏幕尺寸下保持一致的布局。
问题描述：一个包含两个并排浮动子元素的容器（.type），每个子元素又包含三个垂直排列的列表项。在小屏幕上，使用margin属性可以垂直对齐列表项，但在较大屏幕上效果不佳。
解决方案：
-
调整浮动元素尺寸和间距: 设置
.type子元素的width为48%，height为100%，并使用float属性使其浮动。 关键在于使用calc()函数动态计算列表项高度，确保它们在不同屏幕尺寸下保持比例一致。如下所示：
<code class="css">.type > div > div {
margin-bottom: 10px; /* 调整间距 */
height: calc(33.33% - 7px); /* 动态计算高度，减去边框等影响 */
}</code>
-
利用边框辅助对齐: 为列表项添加边框(
border)，方便观察元素边界，确保对齐效果。
<code class="css">.type li {
border-style: solid;
border-width: 1px;
border-color: #bd1a2d;
height: 100%; /* 确保列表项撑满容器高度 */
}</code>
-
消除内部间距: 确保列表项内部没有多余的内边距(
padding)或外边距(margin)，以免影响对齐。
完整的CSS代码如下：
立即学习“前端免费学习笔记（深入）”；
<code class="css">.type {
width: 30%;
height: 100%;
float: left;
box-sizing: border-box;
}
.type > div {
width: 48%;
height: 100%;
}
.type > div:first-child {
float: left;
}
.type > div:last-child {
float: right;
}
.type > div > div {
margin-bottom: 10px;
height: calc(33.33% - 7px);
}
.type li {
border-style: solid;
border-width: 1px;
border-color: #bd1a2d;
height: 100%;
text-align: center; /* 居中显示文本 */
}
.type li.show {
background: #f5d389;
font-weight: bold;
color: #bd1a2d;
}
.school {
width: 69%;
height: 100%;
float: right;
box-sizing: border-box;
}
.list {
height: 100%;
border-style: solid;
border-width: 1px;
border-color: #9F9F9F;
padding: 3% 3% 3% 3%;
box-sizing: border-box;
}</code>
HTML结构示例 (已调整，避免多余嵌套)：
<code class="html"><div class="type">
<div>
<li value="1">123</li>
<li value="2">123</li>
<li value="3">123</li>
</div>
<div>
<li value="4">123</li>
<li value="5">123</li>
<li value="6">123</li>
</div>
</div>
<div class="school">
<div class="list" id="listOne"><p style="font-family: 隶书;color: #aaabab;font-size: 1.3vw;line-height: 5vw"></p></div>
</div></code>
通过以上方法，可以有效解决浮动元素列表项在不同屏幕尺寸下的对齐问题，保持布局的一致性。 注意调整margin-bottom值来控制列表项之间的间距。 calc()函数的计算结果会根据浏览器窗口大小动态调整，确保列表项高度始终保持比例。
