如何解决减小屏幕尺寸后如何防止水平容器重叠或移动?
我正在尝试将两个框彼此对齐,如下所示。如下所示,直到缩小屏幕尺寸为止。然后,物品变得混乱,如第二张图片所示。
我正在使用的代码如下:
CSS
#leftBox {
margin-top: 30px;
margin-bottom: 30px;
margin-right: 10px;
margin-left: 35%;
float:left;
}
#rightBox {
margin-top: 30px;
margin-bottom: 30px;
margin-right: 35%;
margin-left: 10px;
float:right;
}
一切都包裹在这个容器中:
.mycontainer {
position: relative;
z-index: 2;
padding: 104px 0 24px 0;
width: 95%;
max-width: 600px;
margin: auto;
}
HTML
<div id = "leftBox">
<a target="_blank" href="link" style="text-decoration: none">
<code>
<img src="github.png" height="25" width="25"/>
</code>
</a>
</div>
<div id = "rightBox">
<a target="_blank" href="link" style="text-decoration: none">
<code>
<img src="linkedin.png" height="25" width="25"/>
</code>
</a>
</div>
我该如何解决?
解决方法
您的边距和像素使所有内容都过于精确。它们重叠是因为这些框仍遵循边距规则。要使其灵活,请使用flexbox。
添加:
<div class="container">
<!-- Your code -->
</div>
将此设为您的CSS:
.container{
display:flex;
justify-content: space-evenly;
flex-wrap:wrap;
}
#leftbox,#rightbox {
margin: 3% 5%;
}
如果您不希望框使用整个屏幕,请在容器中添加width: 80vw;
或所需的内容。尝试不使用像素。理想情况下是vw,vh,rem或%。
除非您要专门设置像素,否则最好使用视图宽度和视图高度作为单位,而不是使用像素。 因此,您的CSS应该看起来像这样:
margin-top:3vh; 右边距:2vw;
,依此类推。否则,您可以通过@media调用手动设置div以调整为屏幕尺寸
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。