html - 无法在 flex 元素中将文本定位在图像上

<分区>

我正在尝试将一些文本放置在 flex 布局图像的右下角。它似乎没有用。我对 flex 很陌生，犯了很多错误。我有一个左列和一个右列，它们都联系 6 行 2 张图像。在中间我有一些解释性文字。我希望数字 1 到 12 叠加在每张图片的右下角。

html:

<div class="flexbox-container">
    <div class="flexbox-2col-container">
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" />
        <div class="number">1</div>
        </div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
    </div>
    <div class="flexbox-1widecol-container">
        <div class="middle"><h3>12 people to meet in 2018</h3></div>
    </div>
    <div class="flexbox-2col-container">
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
        <div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
    </div>
</div>

CSS:

.flexbox-container {
        display:flex;
        flex-wrap:wrap;
        flex-direction:row;
        align-items:stretch;
        align-items: flex-start;
        justify-content: space-between;
    }
    .flexbox-2col-container {
        flex: 2;
        display:flex;
        flex-wrap:wrap;
        flex-direction:row;
        align-items:stretch;
        justify-content: space-between;
    }
    .flexbox-1widecol-container {
        flex: 1;

        padding: 10px;

    }
        h3 {
            font-family: Roboto, sans-serif;
            font-weight: 600;

        }
    .column50perc {
        width: 50%;
        padding: 10px 5px 0 5px;
        justify-content: space-between;
    }
    img {
        cursor: pointer;
        position: relative;
        display:block;
    }
    img:hover {

    }
    .middle {

    }
    .middle h3 {
        background-color: #404040;
        color: white;
    }
    .number {
        position: absolute;
        display: inline-block;
        bottom: 0;
        right: 0;
        background-color: black;
        color: white;
        z-index: 2;
        width: 50px;
        height: 50px;
    }

请让我知道我做错了什么。

最佳答案

您正在使用绝对位置，因此您应该使父元素成为相对位置。这样每个盒子都会相对于他的容器定位，从而正确定位在图像上:

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
  align-items: flex-start;
  justify-content: space-between;
}

.flexbox-2col-container {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.flexbox-1widecol-container {
  flex: 1;
  padding: 10px;
}

h3 {
  font-family: Roboto, sans-serif;
  font-weight: 600;
}

.column50perc {
  padding: 10px 5px 0 5px;
  justify-content: space-between;
  position: relative;
}

img {
  cursor: pointer;
  position: relative;
  display: block;
}

img:hover {}

.middle {}

.middle h3 {
  background-color: #404040;
  color: white;
}

.number {
  position: absolute;
  display: inline-block;
  bottom: 0;
  right: 0;
  background-color: black;
  color: white;
  z-index: 2;
  width: 50px;
  height: 50px;
}

<div class="flexbox-container">
  <div class="flexbox-2col-container">
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" />
      <div class="number">1</div>
    </div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" />
      <div class="number">2</div>
    </div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" />
      <div class="number">3</div>
    </div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
  </div>
  <div class="flexbox-1widecol-container">
    <div class="middle">
      <h3>12 people to meet in 2018</h3>
    </div>
  </div>
  <div class="flexbox-2col-container">
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
    <div class="column50perc"><img src="https://lorempixel.com/400/400/" /></div>
  </div>
</div>

关于html - 无法在 flex 元素中将文本定位在图像上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47779460/

上一篇：css - 圆边丝带

下一篇：CSS 字体仅适用于从同一基础扩展的某些 Django 模板

相关文章：

Python Mechanize 更改未命名的输入值(已知 id)

iPhone - 带有 html 内容的 UITextView？

css - Bootstrap 复杂列位置排序

css - Angular:子 ngTemplateOutlet 中的自定义 CSS

HTML - div 之间的空间

html - Flexbox 没有按应有的方式包含元素

css - 封装的 flex 容器包装

CSS Grid - flex-start 和 Start Value 在对齐/对齐属性中的区别

html - 如何用 CSS 和 HTML 创建这个 80 年代的背景？

html - 在博客博客中实现 css 按钮