我想将 HTML 和 CSS 下面的内容与附加的参考图像相同答案

【问题标题】：I want to position the contents of below HTML and CSS same as per the attached reference image我想将 HTML 和 CSS 下面的内容与附加的参考图像相同
【发布时间】：2022-09-28 17:38:55
【问题描述】：

我正在尝试将我的内容定位在HTML 和CSS 以下，与参考图像相同，并且我正在使用 flex-box，因为将有七行，但我无法获得图像中的布局位置因为USD/DAY and Total 76.93 USD 的price-para 没有被定位在price-header 和SELECT 之下。请如果有人能让我理解如何纠正它。

HTML

<div class=\"body-div\">
        <div class=\"car-container\">
          <div class=\"car-rows\">
            <div class=\"price-div\">
              <h1 class=\"price-header\">10.99</h1>
              <p class=\"price-para\">USD/DAY</p>
              <button>SELECT</button>
              <p class=\"price-para\">Total 76.93 USD</p>
            </div>

CSS

.body-div {
    display: flex;
    font-size: 1.2vmin;
  }

  .car-container {
    flex: 1;
    width: 75%;
    height: auto;
    margin: 1%;
    padding: 0;
  }
  .car-rows {
    display: flex;
  }

  .price-div {
    width: 16%;
    height: auto;
    text-align: center;
  }

您的问题中似乎没有图像。还请将您的代码制作成可运行的 sn-p，以便我们自己查看问题。请参阅stackoverflow.com/help/minimal-reproducible-example 以获得帮助。

标签： html css

【解决方案1】：

分享您的参考图片，将您的两个价格参数类合二为一，并添加下面的按钮标签。

【讨论】：