时间戳

首页 > 解决方案 > css justify-content：空格之间；不工作

html - css justify-content：空格之间；不工作

问题描述

我有两张照片，我想彼此远离。用我的实际代码我能做到的最好的就是这个在此处输入图像描述

但是女孩的照片应该是正确的，直到红色区域结束。但我不知道为什么不起作用。我尝试了很多不同的方式，但它真的不想走到 flex div 的末尾

.logInPage {
    height: 100vh;
    background: linear-gradient(to right top, #000000, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    flex-direction: column;
}


.loginSection {
    /* padding-top: 3%; */
    display: flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
    width: 30%;
    /* background: linear-gradient(
        to right bottom,
        rgba(21, 134, 226, 0.7),
        rgba(16, 52, 172, 0.322) */
    /* /* ); */
    background-image: url('https://images.unsplash.com/photo-1499419865879-453926ae8a72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80');
    background-size: 100%;
    z-index: 1;
    border-radius: 2rem;
    border: none;
}


.peoplePhoto {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: red;
    width: 95%;
    z-index: 1;
}

.guy {
    max-width: 40%;
    background: green;
    align-self: flex-end;
}
.girl {
    max-width: 40%;
    background: blue;
}
<div class='logInPage'>
  <div class='loginSection'>
                        <div class='peoplePhoto'>
                            <a>
                                <img
                                    src='https://svgshare.com/i/YTG.svg'
                                    title=''
                                    class='humansPhoto guy'
                                />
                            </a>
                            <a>
                                <img
                                    src='https://svgshare.com/i/YT6.svg'
                                    title=''
                                    class='humansPhoto girl'
                                />
                            </a>
                        </div>
                    </div>
                    </div>

标签： htmlcssflexbox

解决方案

应用于float:right图像：

.logInPage {
  height: 100vh;
  background: linear-gradient(to right top, #000000, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  flex-direction: column;
}

.loginSection {
  /* padding-top: 3%; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 60vh;
  width: 30%;
  /* background: linear-gradient(
        to right bottom,
        rgba(21, 134, 226, 0.7),
        rgba(16, 52, 172, 0.322) */
  /* /* ); */
  background-image: url('https://images.unsplash.com/photo-1499419865879-453926ae8a72?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=633&q=80');
  background-size: 100%;
  z-index: 1;
  border-radius: 2rem;
  border: none;
}

.peoplePhoto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: red;
  width: 95%;
  z-index: 1;
}

.guy {
  max-width: 40%;
  background: green;
  align-self: flex-end;
}

.girl {
  max-width: 40%;
  background: blue;
  float: right;
}
<div class='logInPage'>
  <div class='loginSection'>
    <div class='peoplePhoto'>
      <a>
        <img src='https://svgshare.com/i/YTG.svg' title='' class='humansPhoto guy' />
      </a>
      <a>
        <img src='https://svgshare.com/i/YT6.svg' title='' class='humansPhoto girl' />
      </a>
    </div>
  </div>
</div>

推荐阅读