html - 登陆页面文本隐藏在浏览器调整大小的图像下

Question

我不明白为什么在 flex wrap 发挥作用之前，文本会出现在图像下方。我知道这可能很简单，但我就是想不通。我在页面的两边都设置了宽度，但是在调整大小时它们似乎被忽略了，之前的文字几乎完全位于图像后面flex wrap 将它放在下面（我希望图像在发生这种情况时位于顶部，但是当我遇到它时，我会越过那座桥，假设我将在 flex 中使用 reverse 属性）。无论如何，不​​知道发生了什么，并为可能的 HTML 和 CSS 混乱道歉。

谢谢

    <div class="layout">
      <div class="left-sect">
        <img class="logo" src="./images/logo.svg" alt="site logo" />
        <div class="l-content">
          <h1 class="s-head">We're</h1>
          <h1>
            Coming <br />
            Soon
          </h1>
          <p>
            Hello fellow shoppers! We're currently building our new fashion
            store. Add your email below to stay up-to-date with announcements
            and our launch deals.
          </p>
          <input type="email" class="main-form" />
          <button type="submit">
            <img src="./images/icon-arrow.svg" alt="form button arrow" />
          </button>
        </div>
      </div>

      <div class="right-sect">
        <img class="main-img" src="./images/hero-desktop.jpg" alt="" />
      </div>
    </div>
  </body> 


CSS


 :root {
  --ds-red: hsl(0, 36%, 70%);
  --soft-red: hsl(0, 93%, 68%);
  --dg-red: hsl(0, 6%, 24%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  background-image: url(./images/bg-pattern-desktop.svg);
  background-size: cover;
  background-position: center;
}


.layout {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
}

.left-sect {
  padding: 4rem 10rem;
  background-image: url(./images/bg-pattern-desktop.svg);
  background-size: cover;
  background-position: center;
  width: 60%;
}

.l-content {
  margin-top: 7rem;
}

.main-img {
}


.s-head {
  color: var(--ds-red);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 4rem;
  letter-spacing: 1.2rem;
}

h1 {
  font-size: 4rem;
  letter-spacing: 1.2rem;
  text-transform: uppercase;
  color: var(--dg-red);
  font-weight: 400;
}

p {
  color: var(--ds-red);
  text-emphasis: left;
  width: 30rem;
  line-height: 1.3rem;
  margin-top: 1.5rem;
}

标签： htmlcssflexboxresponsive

Answer 1

您应该添加媒体查询。

 :root {
  --ds-red: hsl(0, 36%, 70%);
  --soft-red: hsl(0, 93%, 68%);
  --dg-red: hsl(0, 6%, 24%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  background-size: cover;
  background-position: center;
}


.layout {
  display: flex;
}

.left-sect {
  padding: 4rem 10rem;
  background-image: url(./images/bg-pattern-desktop.svg);
  background-size: cover;
  background-position: center;
  width: 60%;
}

.l-content {
  margin-top: 7rem;
}

.main-img {
}


.s-head {
  color: var(--ds-red);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 4rem;
  letter-spacing: 1.2rem;
}

h1 {
  font-size: 4rem;
  letter-spacing: 1.2rem;
  text-transform: uppercase;
  color: var(--dg-red);
  font-weight: 400;
}

p {
  color: var(--ds-red);
  text-emphasis: left;
  width: 30rem;
  line-height: 1.3rem;
  margin-top: 1.5rem;
}

@media screen and (max-width:1070px){/* <== You sould change this to what you want.*/
html .layout{
flex-direction:column;
  }
  
  @media screen and(min-width:1017px){ /* <== You sould change this to what you want.*/
    html .layout{
      flex-direction:row;
    }
  }

    <div class="layout">
      <div class="left-sect">
        <img class="logo" src="https://image.shutterstock.com/image-vector/dots-letter-c-logo-design-260nw-551769190.jpg" alt="site logo" />
        <div class="l-content">
          <h1 class="s-head">We're</h1>
          <h1>
            Coming <br />
            Soon
          </h1>
          <p>
            Hello fellow shoppers! We're currently building our new fashion
            store. Add your email below to stay up-to-date with announcements
            and our launch deals.
          </p>
          <input type="email" class="main-form" />
          <button type="submit">
            <img src="./images/icon-arrow.svg" alt="form button arrow" />
          </button>
        </div>
      </div>

      <div class="right-sect">
        <img class="main-img" src="https://image.shutterstock.com/image-vector/dots-letter-c-logo-design-260nw-551769190.jpg" alt="" />
      </div>