时间戳

首页 > 解决方案 > 边距不当

html - 边距不当

问题描述

我正在完成一个新项目并遇到了这个问题。左侧的空间比右侧大。我尝试了很多解决方案，但都没有奏效。 在此处输入图像描述

这是我的主体和主体的 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

标签： htmlcssflexboxmargin

解决方案

添加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

推荐阅读