Html 沿图像垂直对齐div

我在代码笔中总结了以下HTML/CSS/JS：

HTML:

<div id="blockcart-wrapper">
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">

      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="toggleClass()">X</a></div>
      <ul>
      </ul>
      <div class="shopping-cart-header">CART</div>
      <div class="products-container">
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
          <div class="product-details">
            <div class="name-header">This is a very long test name</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">open</a></span>
            </div>
          </div>
        </div>

      </div>
      <div class="checkout">
        <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
          <hr>
        </div>
        <div class="cart-total">
          <span class="label">Total</span>
          <span class="value">0</span>
        </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
  </div>
</div>  

和JavaScript（仅包含一个函数）：

因此，目标是将项目对齐到图片的右侧。名称（带有类别

名称标题的div

应始终位于图片的“顶部”，数量（带有类别

产品数量详细信息的div

应位于“一半”和价格（分类为

价格开放的div应位于底部。元素内的对齐很好，只是定位没有按照我想要的方式工作。

我尝试的内容：我尝试使用
position:absolute；
对齐div，然后使用
top:0；
作为名称；
bottom:0；
作为价格；
top:50%；
作为数量详细信息。这并没有真正起作用。

有人能帮我吗？
再加上这两件事

.cart-preview .header {
    float: left;
}

.cart-preview .body {
    float: left;
}

这是我的解决方案，以全屏模式打开代码段

我将图像的高度增加到300px仅用于测试目的

justify content:space-between；
将通过在子级之间平均分配空间来对齐项目

在您的案例中，名称将位于顶部，产品细节在中间，价格在底部

将此添加到您的CSS中

 .product-details{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content:space-between;
    }


函数切换类（）{
document.getElementById（'shopping-cart-body'）.classList.toggle（'open'）；
}
.cart预览{
浮动：对；
位置：相对位置；
}
.购物车预览a，
.购物车预览a：悬停，
.购物车预览a:已访问{
文字装饰：无；
颜色：继承；
}
.cart预览.标题{
显示：块；
字体大小：粗体；
边框：1px实心#808080；
填充物：5px；
光标：指针；
背景色：#fff；
}
.购物车预览.车身{
能见度：可见；
位置：固定；
身高：100%；
排名：0；
宽度：400px；
z指数：101；
背景色：#fff；
过渡：右1s线性；
右：-400px；
}
.cart预览.body.open{
能见度：可见；
过渡：右1s线性；
右：0px；
}
.购物车预览.车身.购物车车身{
字体系列：“IBMPlexSerif”；
宽度：100%；
文本对齐：居中；
}
.cart预览。主体。关闭{
边缘顶部：20px；
左边距：20px；
字体大小：30px；
浮动：左；
}
.cart preview.body.shopping cart标题{
字体系列：“IBMPlexSans”；
字体大小：45px；
边缘顶端：40px；
文本对齐：居中；
}
.cart preview.body.products容器{
位置：相对位置；
身高：100%；
宽度：100%；
边缘顶部：15px；
溢出：自动；
}
.产品{
显示器：flex；
}
.产品>部门{
宽度：50%；
}
.product.prodcut图像{
左边距：20px；
右边距：10px；
}
.产品img{
宽度：100%；
高度：300px；/*用于测试*/
}
.名称标题{
文本对齐：左对齐；
}
.cart preview.body.products container>.product image{
位置：绝对位置；
宽度：50%；
左：0；
}
.cart预览.body.products容器>.product详细信息{
位置：绝对位置；
宽度：50%；
浮动：左；
}
.购物车预览.车身.产品容器.颜色圈：前{
内容：'\25CF'；
字体大小：30px；
}
.cart预览.正文.签出{
位置：绝对位置；
最高：80%；
身高：100%；
宽度：100%；
背景：白色；
}
.产品数量详情.数量{
浮动：左；
文本对齐：居中；
边框：2件纯黑；
右边距：10px；
背景：白色；
宽度：36px；
高度：36px；
字体大小：15px；
线高：33px；
颜色：黑色；
}
.购物车预览.产品{
边缘顶部：10px；
}
.产品数量明细.数量：后{
内容：“x”
}
.cart预览.body.checkout>按钮{
位置：绝对位置；
背景：黑色；
文本对齐：居中；
垂直对齐：中间对齐；
边界：无；
颜色：白色；
最高：13%；
线高：14px；
底部：50px；
高度：40px；
宽度：205px；
左：25%；
}
.结帐.交税{
位置：绝对位置；
宽度：100%；
最高：5%；
}
.结帐.购物车总数{
位置：绝对位置；
宽度：100%；
排名前10%；
浮动：左；
}
.购物车总价值{
右边距：20px；
浮动：对；
}
.购物车总计。价值：之后{
内容：“€”
}
.购物车总数.标签{
左边距：20px；
浮动：左；
}
.税收.价值{
右边距：20px；
浮动：对；
}
.税收.标签{
左边距：20px；
浮动：左；
}
.税收>人力资源{
边缘顶部：30px；
左边距：20px；
右边距：20px；
边框颜色：黑色；
}
.产品数量详情{
对齐项目：居中；
显示：内联flex；
}
.产品详情{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
证明内容：之间的空间；
}
#区块车模式{
位置：固定；
背景色：hsla（0,0%，100%，.1）；
排名：0；
左：0；
底部：0；
右：0；
文本对齐：居中
}
#区块车模式>div{
填充：20px；
显示：内联块；
最小宽度：50%；
最小高度：400px；
利润上限：200px；
文本对齐：左对齐；
背景色：#fff；
z指数：100；
边框：1px实心#ccc
}



运货马车
这是一个很长的测试名称
数量
颜色
二十、 XX
税
0

全部的
0
但这无助于沿左图垂直定位div？请选择垂直对齐：居中/上/下；谢谢，我正要写一篇关于拉伸图像的评论，这时我在img规则：D中看到了高度：300px
.cart-preview .header {
    float: left;
}

.cart-preview .body {
    float: left;
}

 .product-details{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content:space-between;
    }