Question

我尝试使用Flexbox设置包含3列的页面部分。

3列设置得很好，我遇到的问题是section1 div不像子元素那么高。

我尝试了height: auto，height:100%，overflow: auto，overflow:visible等。第1节div更改高度的唯一时间是我特别说明像素高度的时间。似乎flexbox项目充当了浮点数，所以我尝试clear:both无效。

我搜索了stackoverflow和其他网站，但没有找到答案，这让我相信这是我在使用flexbox时出错了。

＆＃13;

body {
  background: lightgrey;
}
.body {
  position: relative;
  width: 75% /* 747.75px */;
  margin: auto;
  top: -3.5em;
  background-color: white;
  border-top: 3px solid #ff8400;
}
.top-border {
  display: block;
  position: relative;
  top: 2em;
  border-top: 1px solid #eef3f0;
  width: 95%;
  left: 2.5%;
}
.section1 {
  position: relative;
  display: flex;
  justify-content: space-around;
  top: 5em;
  height: auto;
}

＆＃13;

<div class="body">
  <div class="top-border"></div>
  <div class="section1">
    <div class="what-i-do">
      <img class="what-i-do-icon" src="images/what-i-do.png" />
      <h1 class="what-i-do-title">What I Do</h1>
      <p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
        a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
      <p class="view-more-btn">View More</p>
    </div>
    <div class="development">
      <img class="development-icon" src="images/development.png" />
      <h1 class="development-title">Development</h1>
      <p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
        a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
    </div>
    <div class="design">
      <img class="design-icon" src="images/design.png" />
      <h1 class="design-title">Design</h1>
      <p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
        consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

请参阅Relative positioning

根据normal flow或者{。}布置了一个方框浮动，它可能相对于这个位置移动。这就是所谓的 相对定位。以这种方式偏移框（B1）对随后的框（B2）没有影响：B2被赋予一个位置，就像B1一样没有偏移，B2在B1偏移后没有重新定位应用。这意味着相对定位可能导致框重叠。

在这里，您不想移动单个框，您希望它也可以推送以下内容。然后，您应该使用margins。

＆＃13;

resource

＆＃13;

body {
  background: lightgrey;
}
.body {
  width: 75% /* 747.75px */;
  margin: auto;
  margin-top: -3.5em;
  background-color: white;
  border-top: 3px solid #ff8400;
}
.top-border {
  top: 2em;
  border-top: 1px solid #eef3f0;
  width: 95%;
  margin-left: 2.5%;
}
.section1 {
  display: flex;
  justify-content: space-around;
  margin-top: 5em;
}

＆＃13;

高度问题：auto和Flexbox

1 个答案: