对齐三个div(left/center/right)以适应小屏幕,同时保持它们的中间元素居中,可以使用Flexbox布局来实现。以下是一种可能的解决方案:
HTML结构:
<div class="container">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
CSS样式:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) {
.container {
flex-wrap: wrap;
justify-content: center;
}
.left, .center, .right {
width: 100%;
text-align: center;
}
}
解释:
.container
将三个div水平排列,并通过justify-content: space-between;
使它们分散对齐。.container
的flex-wrap
属性设置为wrap
,使其换行显示。text-align: center;
使它们在小屏幕上居中显示。这样,当屏幕宽度较小时,三个div将垂直堆叠,并且它们的中间元素仍然保持居中对齐。
请注意,以上解决方案是一种示例,实际情况可能因具体需求而有所不同。在实际开发中,您可以根据具体情况进行调整和优化。
领取专属 10元无门槛券
手把手带您无忧上云