如何解决保证金不当
我正在完成一个新项目并遇到了这个问题。左侧的空间比右侧大。我尝试了很多解决方案,但没有一个奏效。
这是我的 body 和 main 的 CSS 代码:
body {
font-family: $font;
font-size: 15px;
background: url(/images/bg-pattern-top-desktop.svg),url(/images/bg-pattern-bottom-desktop.svg);
background-position: top left,top right;
background-repeat: no-repeat;
overflow-x: hidden;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
padding-top: 70px;
}
main {
height: 70%;
}
还提供了整个代码的链接: https://codepen.io/kyrylolvov-the-looper/pen/rNMYOwE
解决方法
在 align-items:flex-end;
上添加 .second-row
,这将正确显示 :)
.second-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: flex-end; // Add this line of code
}
CODEPEN 工作链接: https://codepen.io/emmeiWhite/pen/jOMabaQ
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。