我可以使用 display flex 但只能使用图像吗？

Question

这就是我想要的（带着包）https://i.stack.imgur.com/iUh9O.png

这就是我现在拥有的https://i.stack.imgur.com/f1GhW.png

这是css：

 <!--listing-->
.listing{}
    
.listing{
    display:inline-block;
    margin-top:150px;
    margin-left:60px;
    width:35%;
}

.listing p {
    font-size:16px;
    line-height:30px;
    color:#0000;
}

.price {
    color: #f76f46;
    font-size:20px;
    font-weight:100px;
}

和html：

<!--main section-->
<div class="listing">
    <img src="pinkbag.png" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    
    <img src="pinkbag.png" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    
    <img src="pinkbag.png" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
</div>

如果我使用 display:inline-flex;而不是 css 中的 inline-block ，而是这样结束 https://i.stack.imgur.com/O65l2.png

有没有办法让文字留在每张图片下方？

Answer 1

请找到flex 实现。

.listing {
  display: flex;
  margin-top: 150px;
  margin-left: 60px;
  flex-wrap: wrap;
}

.image-container {
  width: 35%;
  display: flex;
  flex-direction: column;
}

.listing p {
  font-size: 16px;
  line-height: 30px;
  color: #0000;
}

.price {
  color: #f76f46;
  font-size: 20px;
  font-weight: 100px;
}

<div class="listing">
  <div class="image-container">
    <img src="https://via.placeholder.com/150" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span
        class="price center">$76.00</span></p>
  </div>
  <div class="image-container">
    <img src="https://via.placeholder.com/150" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span
        class="price center">$76.00</span></p>
  </div>

  <div class="image-container">
    <img src="https://via.placeholder.com/150" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span
        class="price center">$76.00</span></p>
  </div>
</div>

Answer 2

像这样将每个 img 和 p 标签包装在一个 div 中......

<div class="listing">
   <div class="col1">
       <img src="pinkbag.png" class="center">
       <p style="color:#3d5791;" class="center">
          <b>Extra Large Madison Handbag</b><br>
          <span class="price center">$76.00</span>
       </p>
   </div>

   <div class="col1">
       <img src="pinkbag.png" class="center">
       <p style="color:#3d5791;" class="center">
          <b>Extra Large Madison Handbag</b><br>
          <span class="price center">$76.00</span>
       </p>
   </div>

   <div class="col1">
       <img src="pinkbag.png" class="center">
       <p style="color:#3d5791;" class="center">
          <b>Extra Large Madison Handbag</b><br>
          <span class="price center">$76.00</span>
       </p>
   </div>
</div>

并使用 css flex 布局将它们并排对齐：

.listing {
   display: flex;
   align-items: center;
   justify-content: space-around;
}

    

Answer 3

在每对图像/文本周围放置一个 flex 容器：

<!--main section-->
<div class="listing">

  <div class="myFlexContainer">
    <img src="pinkbag.png" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
  </div>

</div>


.myFlexContainer {
  display: flex;
  flex-direction: column;
}

Answer 4

您可以使用inline-grid and grid-template-columns

输入display: inline-grid; 和grid-template-columns: auto auto auto; 进入父容器。

别忘了将每个列表放在div

调整网格列数改变auto中grid-template-columns的数量

更多内容请关注here

<!--listing-->
.listing{}
    
.listing{

    display: inline-grid;
    grid-template-columns:  auto auto auto;
    margin-top:150px;
    margin-left:60px;
    width:100%;
}

.listing p {
    font-size:16px;
    line-height:30px;
    color:#0000;
}

.price {
    color: #f76f46;
    font-size:20px;
    font-weight:100px;
}

<!--main section-->
<div class="listing">
    <div>
      <img src="https://image.shutterstock.com/image-photo/red-elegant-female-bag-two-260nw-1032419707.jpg" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    </div>
    
    <div>
      <img src="https://image.shutterstock.com/image-photo/red-elegant-female-bag-two-260nw-1032419707.jpg" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    </div>
    
    <div>
      <img src="https://image.shutterstock.com/image-photo/red-elegant-female-bag-two-260nw-1032419707.jpg" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    </div>
    
    <div>
      <img src="https://image.shutterstock.com/image-photo/red-elegant-female-bag-two-260nw-1032419707.jpg" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    </div>
    
    <div>
      <img src="https://image.shutterstock.com/image-photo/red-elegant-female-bag-two-260nw-1032419707.jpg" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    </div>
    
    <div>
      <img src="https://image.shutterstock.com/image-photo/red-elegant-female-bag-two-260nw-1032419707.jpg" class="center">
    <p style="color:#3d5791;" class="center"><b>Extra Large Madison Handbag</b><br><span class="price center">$76.00</span></p>
    </div>
    

</div>