首页 / 技术问答 / Html问答列表 / 问答详情

Html Flexbox 在添加额外的 div 后停止正常工作

我想做一个简单的响应网站，在背景前有3张图片，每一张图片都有一个按钮，当你在上面悬停时会被覆盖.问题是，当我添加额外的容器以进行图像悬停覆盖、对齐内容和行换行时，它们会停止工作，并且不再正确地将图像居中.如果我移除所有容器div，一切都会恢复正常.

.background {
  display: inline-block;
  position: relative;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.mountain {
  pointer-events: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  z-index: -1;
}

.tabs {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-flow: row wrap;
  gap: 10px;
  padding-top: 200px;
}

.container1 {
  position: relative;
  left: 80px;
}

.container1:hover .portraits {
  opacity: 0.5;
}

.portraits {
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container2 {
  position: relative;
  width: 480px;
  max-height: 100%;
}

.container2:hover .secondtab {
  opacity: 0.5;
}

.secondtab {
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container3 {
  position: relative;
  margin-right: 80px;
  ;
}

.container3:hover .thirdtab {
  opacity: 0.5;
}

.thirdtab {
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}
<div class="background">
  <img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
  <div class="buttons">
    <button class="Contacts">CONTACTS</button>
    <button class="Aboutme">ABOUT ME</button>
    <section class="tabs">
      <div class="container1">
        <input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
        />
      </div>
      <div class="container2">
        <input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
        />
      </div>
      <div class="container3">
        <input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
        />
      </div>
    </section>

推荐答案

把.tabs班的space-between改为space-around.然后，删除在flex项目上设置的所有值.例如，我删除了您设置为container1的left: 80px值，并从container3中删除了margin-right.

当您指示浏览器将这些容器放置在父容器中相对静止的位置时，设置这些值会对flexbox产生反作用.如果你允许flex完成它的工作，它的响应速度会快得多.

.background {
  display: inline-block;
  position: relative;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.mountain {
  pointer-events: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  z-index: -1;
}

.tabs {
  display: flex;
  justify-content: space-around;
  align-content: space-between;
  flex-flow: row wrap;
  padding-top: 200px;
}

.container1 {
  display: flex;
  position: relative;
}

.container1:hover .portraits {
  opacity: 0.5;
}

.portraits {
  display: flex;
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container2 {
  display: flex;
  position: relative;
  width: 480px;
  max-height: 100%;
}

.container2:hover .secondtab {
  opacity: 0.5;
}

.secondtab {
  display: flex;
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}

.container3 {
  display: flex;
  position: relative;
}

.container3:hover .thirdtab {
  opacity: 0.5;
}

.thirdtab {
  display: flex;
  margin: auto;
  max-width: 100%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  width: 480px;
  max-height: 100%;
}
<div class="background">
  <img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
  <div class="buttons">
    <button class="Contacts">CONTACTS</button>
    <button class="Aboutme">ABOUT ME</button>
  </div>
  <section class="tabs">
    <div class="container1">
      <input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
      />
    </div>
    <div class="container2">
      <input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
      />
    </div>
    <div class="container3">
      <input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
      />
    </div>
  </section>
</div>

Edit ~如果你不希望图像被包裹，请移除所有静态(固定)宽度，并使用以下方法:

.container1,
.container2,
.container3 {
  width: calc(100%/3);
}

Html相关问答推荐

NG8004：找不到名为""的管道.'' [插件Angular 编译器]

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表？

试图让三个Divs与下面的另外三个对齐

如何仅 Select 与子代CSS类匹配的第一个元素

在NzMessageService中传递动态TemplateRef- Angular 15

如何使用html和css关键帧创建动画

未在抖动中播放的HTML音频｜｜文本正在工作其他标记正在播放，但音频未播放

元素offsetTop在滚动容器中时没有更改

HTML 重定向到当前服务器

使用简单的 HTML 设计公司徽标和文本

在HTML请求中添加源URL

CSS Grid 布局：1 大图和 3 小图

使用图像自定义 CSS 网格边框

更改标签标签的大小

为什么在使用src与srcdoc时 iframe 内容高度呈现不同？

发光效果html动画

如何在 bootstrap 程序导航栏中居中搜索图标

圆形边框显示在该部分后面.怎么修？

当我希望它只横向滚动时，可滚动菜单也会上下移动

是否可以在换行时向锚标记添加填充？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630