Question

我目前正在开发我的第一个网站。我已经到了一个点，我有两个div在Flexbox中彼此相邻放置。两个div的宽度和高度大小均为百分比。但是，当我缩小网站时，右侧div与左侧div重叠。如果它们要重叠，我希望它们可以放在彼此之下。（这是关于右侧内容div与左侧内容div重叠）

我已经包含了我的HTML和CSS代码。

HTML：

<div class="content">
               <div class="left-side-content">
                    <div class="intro">
                        <div class="brands">
                            <a href="#"><img src="images/logo%20ster.png" id="logo-ster"/></a>
                        </div>

                        <p class="top-title">Banner and endcard</p>
                        <h1>STER</h1>
                        <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
                        <button class="view-project-button">View Project</button>
                    </div>
                </div>

                <div class="right-side-content">
                    <img src="images/sponsorloop-collage.png"/>
                </div>

</div>

CSS：

.content {
    display: flex;
    align-items: center;
    height: 80%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.content .left-side-content {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
}

.content .right-side-content {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

Answer 1

将flex-wrap属性添加到.content。

此外，不要使用width代替左右内容，而是使用flex-basis，或将其合并到速记flex中，如下面的代码段所示......

.content {
  display: flex;
  align-items: center;
  height: 80%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.content .left-side-content {
  flex: 1 0 30%;
  height: 100%;
  display: flex;
  align-items: center;
}

.content .right-side-content {
  flex: 1 0 70%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

<div class="content">
  <div class="left-side-content">
    <div class="intro">
      <div class="brands">
        <a href="#"><img src="images/logo%20ster.png" id="logo-ster" /></a>
      </div>

      <p class="top-title">Banner and endcard</p>
      <h1>STER</h1>
      <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
      <button class="view-project-button">View Project</button>
    </div>
  </div>

  <div class="right-side-content">
    <img src="https://placehold.it/300x300" />
  </div>

</div>

我不希望我的div在Flexbox中重叠

1 个答案: