Question

我需要帮助将元素放在弹性项目的顶部。我在一排中有3张图片。在每个图像的左下角，我想添加2个元素，即绿色方块，旁边是品牌名称。品牌名称应在图像的宽度上具有顶部边框。在第二张图片上，我想在右上角添加第三个元素。我做了a simple jsfiddle来证明自己被困在哪里。 This是我需要做的。

<div class="flex-container">
  <ul>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
      <span class="item-price group">&#36;145.99</span>
      <span class="item-brand-name group">Even</span>
    </li>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg" >
      <span class="item-price group">&#36;145.99</span>
      <span class="item-brand-name group">Even</span>
      <span class="on-sale">on sale</span>
    </li>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
      <span class="item-price group">&#36;145.99</span>
      <span class="item-brand-name group">Buffalo</span>
    </li>
  </ul>
</div>

CSS

.flex-container {
  display: flex;
}

img {
  width: 300px;
  height: 270px;
}

.flex-container ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container li {
  display: flex;
  position: relative;
  justify-content: space-between;
}

.flex-container .group {
  position: absolute;
  justify-content: center;
  align-items: center;
  transform: translate(20px, 200px)
}

.flex-container .item-price {
  font-size: 0.8rem;
  color: white;
  background: rgb(87, 197, 160);
  height: 67px;
  width: 67px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: inline-flex;
}

.flex-container .item-brand-name {
  font-size: 0.8rem;
  color: white;
  width: 250px;
  border-top: 1px solid grey;
  justify-content: center;
}

.flex-container .on-sale {
  font-size: 0.8rem;
  color: white;
  background: black;
  height: 67px;
  width: 67px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: inline-flex;
}

Answer 1

只需将<li>元素位置设置为relative，并将.on-sale类位置设置为absolute。这样，您就可以将.on-sale类相对于<li>元素放置在任意位置。

更新小提琴； https://jsfiddle.net/szd5fcvu/

Answer 2

那呢？

我更喜欢总是将flex规则放在parent上或使用divs制作表。希望我能对您有所帮助。

.flex-container {
  display:flex;

}
img{
  width:300px;
  height:270px;
}
.flex-container ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container li{
display:flex;
position:relative;
justify-content: center;
align-items: flex-end;
float:left; 
width:300px;
height:270px;background:url("https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg");
background-size:100%;
background-repeat:no-repeat;
}

 
 .flex-container .item-price{
	font-size: 0.8rem;
  color: white;
  background: rgb(87, 197, 160);
  height: 67px;
  width: 67px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  
}
   
 .flex-container .item-brand-name{
	font-size: 0.8rem;
  color: white;
  width:250px;
  background:red;
  float:left;
  height: 66px;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  border-top:1px solid grey;

 
}
	
.flex-container .on-sale{
	font-size: 0.8rem;
  color: white;
  background: black;
  height: 67px;
  width: 67px;
  position:absolute;
  display:flex;
  justify-content: center;
  align-items: center;
  right:0;
  top:0;
}

<div class="flex-container">
			<ul>
				<li>
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
				</li>
				<li>
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
          <span class="on-sale">on sale</span>
				</li>
				<li>
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Buffalo</span>
				</li>
			</ul>
</div>

Answer 3

您不需要在所有地方都使用flexbox。我删除了几行代码，并放置了待售标签relative。希望对您有所帮助。

.flex-container {
  display:flex;
}
img{
  width:300px;
  height:270px;
}
.flex-container ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-container li{
		display:flex;
		position:relative;
    justify-content: space-between;
}

.flex-container .group {
		position:absolute;
		justify-content: center;
  	align-items: center;
    transform:translate(20px, 200px)
    }
 
 .flex-container .item-price{
	font-size: 0.8rem;
  color: white;
  background: rgb(87, 197, 160);
  height: 67px;
  width: 67px;
  /*justify-content: center;
  align-items: center;*/
  text-align: center;
  line-height:67px;
  /*display: inline-flex;*/
}
   
 .flex-container .item-brand-name{
	font-size: 0.8rem;
  color: white;
  width:250px;
  border-top:1px solid grey;
  justify-content: center;
 
}
	
.flex-container .on-sale{
	font-size: 0.8rem;
  color: white;
  background: black;
  height: 67px;
  width: 67px;
  /*justify-content: center;
  align-items: center;*/
  text-align: center;
  /*display: inline-flex;*/
  line-height:67px;
  position:relative;
  right:90px;
  
}

<div class="flex-container">
			<ul>
				<li>
					<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
				</li>
				<li>
				<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg" >
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Even</span>
          <span class="on-sale">on sale</span>
				</li>
				<li>
					<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Red_High_Heel_Pumps.jpg">
					<span class="item-price group">&#36;145.99</span>
					<span class="item-brand-name group">Buffalo</span>
				</li>
			</ul>
      </div>

弹性项目顶部的定位元素

3 个答案: