Question

我的html标签是这样的，当我使用absolute和flex时，在Firefox中出现问题。我需要<h2>底部的someBox，但它会在Firefox中浮出someBox。

<div class="leftPointBox">
  <a class="someBox">
    <div class="wrap">
      <picture>
        <source media="(max-width: 414px)" srcset="img/420x315.jpg">
        <source media="(min-width: 413px)" srcset="img/800x600.jpg">
        <img src="img/800x600.jpg" srcset="img/420x315.jpg 414w, img/800x600.jpg 1024w">
      </picture>
    </div>
    <h2>TITLE</h2>
  </a>
</div>

css（scss）：

.someBox {
    position: relative;
    overflow: auto;
}
.leftPointBox{
    width: 380px;
    float: left;

    h2 {
        text-align: left;
        font-weight: 600;
        color: #ffffff;
        font-size: 20px;
        background-color: #004E98;
        position: absolute;
        bottom: 0;
        width: 360px;
        padding: 10px;
        margin-bottom: 0;
    }
}
.someBox .wrap {
    height: 285px;
}

.wrap {
    position: relative;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 10px;
    img {
        max-width: 100%;
        max-height: 100%;
        @media screen and (max-width: 1024px){ flex: inherit; max-width: 100%;}
        }
}

Answer 1

在某些情况下，浮动元素和flexbox彼此不太喜欢。我删除了所有浮动元素，以保持文档流完整无缺，并将flexbox从.wrap“移动”到.someBox。现在，使用align-self，您可以将标题放置在底部。

我将.someBox的高度设置为600像素，只是为了说明标题位于底部。

.someBox {
  display: flex;
  flex-wrap: wrap;
  height: 600px; /* Demo purpose only */
}

.leftPointBox {
  width: 380px;
}

.leftPointBox h2 {
  text-align: left;
  font-weight: 600;
  color: #ffffff;
  font-size: 20px;
  background-color: #004E98;
  padding: 10px;
  margin-bottom: 0;
  align-self: flex-end;
  width: 100%;
}

.someBox .wrap {
  height: 285px;
}

.wrap {
}

.wrap img {
  max-width: 100%;
  max-height: 100%;
}

<div class="leftPointBox">
  <a class="someBox">
    <div class="wrap">
      <picture>
        <source media="(max-width: 414px)" srcset="https://via.placeholder.com/420x315">
        <source media="(min-width: 413px)" srcset="https://via.placeholder.com/800x600">
        <img src="https://via.placeholder.com/800x600" srcset="https://via.placeholder.com/420x315 414w, https://via.placeholder.com/800x600 1024w">
      </picture>
    </div>
    <h2>TITLE</h2>
  </a>
</div>

在Firefox中使用absolute和flex存在位置问题

1 个答案: