Question

有人可以解释一下为什么div.project-desc悬停在div.project的高度（100%的子代）为何不占据其容器的div.project的情况下？当视口宽度小于769px时，会发生这种情况。当视口的大小大于769px时，所有视口将正常工作。我正在使用布尔玛.tile和.box。我知道这与.tile元素的媒体查询有些冲突，但是我无法弄清楚它是什么。谢谢！ Codepen：https://codepen.io/albertrf147/pen/OqOJqG?editors=1100

<section class="section is-white has-text-centered">
    <div class="container is-narrow">
      <h1 class="title">My Projects</h1>
      <h2 class="subtitle">Here is some of my work, which I'm most proud of.</h2>

      <div class="tile is-ancestor">

        <div class="tile is-4 is-vertical is-parent">

          <div id="project-1" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">CodePen</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>
          </div>

          <div id="project-2" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Glitch</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
        </div>

        <div class="tile is-parent">
          <div id="project-3" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Another</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
      </div>

    </div>
  </div></section>

CSS

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css");

* {
  font-family: "Montserrat" !important;
}

body {
  background: #f5f5f5;
}

.hero-foot img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.list {
  margin-top: 30px;
}

.container.is-narrow {
  max-width: 1000px;
}

.skills {
  margin-top: -200px;
}

.tile.is-child {
  min-height: 200px;
}

.is-child.box {
  background-size: cover;
}

#project-1 {
  background-image: url("https://images.pexels.com/photos/449627/pexels-photo-449627.jpeg?cs=srgb&dl=beach-beautiful-bridge-449627.jpg&fm=jpg");
}

#project-2 {
  background-image: url("https://images.pexels.com/photos/97077/pexels-photo-97077.jpeg?cs=srgb&dl=ai-codes-coding-97077.jpg&fm=jpg");
}

#project-3 {
  background-image: url("https://images.pexels.com/photos/5836/yellow-metal-design-decoration.jpg?cs=srgb&dl=art-creative-creativity-5836.jpg&fm=jpg");
}

.project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.project-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  //background: #000;
  opacity: 0.5;
  color: white;
  line-height: 2.5em;
  z-index: 2;
}

.project:hover .project-title {
  visibility: hidden;
}

.project-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 2.5em;
  padding: 0 24px;
  text-align: justify;
  //border-radius: 5px;
  color: transparent;
  background: #000;
  opacity: 0.5;
  //visibility: hidden;
  z-index: 1;
  transition: all 0.2s ease;
}

.project:hover .project-desc {
  color: #fff;
  height: 100%;
  border-radius: 5px;
}

.project-text {
  font-size: 0.8em;
}

布尔玛CSS

@media screen and (min-width: 769px), print
.tile.is-4 {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
}

@media screen and (min-width: 769px), print
.tile:not(.is-child) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tile.is-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.tile.is-parent {
    padding: .75rem;
}
.tile {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
}

Answer 1

肿块.tile不是769w下面的伸缩容器。您可以通过将以下代码添加到CSS中来强制将父图块设置为flex容器。这不会影响其他任何事情。

.tile.is-parent {
  display: flex;
}

为什么不能在我的div中应用高度100％？

1 个答案: