图像/内容未包含在 div 内
P粉983021177
P粉983021177 2024-04-03 10:15:05
0
1
457

我试图在该页面的第一个 div 内包含一个图像,但由于某种原因它位于该页面之外。所有资源都位于弹性盒中。当我将文本放入该 div 中而不是图像时,它工作得完全正常。

我用红色圈出了我正在谈论的图像和 div。 该代码片段不会向您展示我在说什么,因为它不是完整的代码。

.landing {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.introWrapper {
  width: 1000px;
}

.intro1 {
  font-size: 25px;
  text-align: center;
  font-family: 'Yapari';
  align-items: center;
  justify-content: center;
  margin-top: 23px;
}
.intro2 {
  font-size: 25px;
  text-align: center;
  font-family: 'Yapari';
  /* font-weight: 72; */
  margin-top: 50px;
}
#introCircle {
  border: 2px solid black;
  border-radius: 50%;
  width: 230px;
  height: 70px;
  margin: auto;
}
.icons {
  border: 2px solid black;
  height: 50px;
}
.icon1 {
  width: 30px;
}
<div id='landing' className={styles.landing}>
      <div className={styles.introWrapper}> 
        <div className={styles.icons}>
          <img src={icon1} className={styles.icon1}/>
        </div>
        <div id={styles.introCircle}>       
          <h1 className={styles.intro1}>HELLO I'M</h1> 
        </div>       
        <LastName />
          <h1 className={styles.intro2}>A FULL STACK DEVELOPER</h1>
      </div>
    </div>

P粉983021177
P粉983021177

全部回复(1)
P粉231079976

据我了解,您已经为 div“图标”提供了高度。将 height 更改为 min-height

.icons {
  border: 2px solid black;
  min-height: 50px;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!