Question

我试图将某些文字放在图片的右下角，这些图片位于弹性布局中。它似乎没有起作用。我很擅长弯曲并且犯了很多错误。我有一个左列和一个右列，它们都接触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;
    }

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

Answer 1

您正在使用绝对位置，因此您应该使父元素相对位置。就像每个盒子将相对于他的容器定位，从而正确地定位在图像上：

.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>

无法在弹性项目中将图像放在图像上

1 个答案: