javascript - 我如何用 html 和 css 订购这个？

Question

连接 api 后，我需要对它给我的数据进行排序。我已经配置了这些列，但它只响应一个并将每张卡排序在另一张下方。

如何让它们在我想要的列中并排？

我还想修改它说买的地方，然后价格低于另一个。

我留下了 html 代码和 api 连接。

指数：

<div class="container body-content">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                
                <div id="price"></div>
                
                <hr>

                <h1><b>*</b> (1) Aclaración importante sobre 'Dolar Bolsa':
                    La compra y venta de "Dolar Bolsa" o "Dolar MEP" 
                    corresponde a operaciones con títulos valores, no 
                    implicando en ningún momento el acceso al mercado de 
                    cambios en el marco de las regulaciones establecidas por 
                    el Banco Central de la República Argentina.</h1>
                <br />

            </div>
        </div>
    </div>
</div>

接口：

function fetchData() {
fetch("https://www.dolarsi.com/api/api.php?type=valoresprincipales")

  .then(response => {
    return response.json();
  })
  .then(data => {
    const filteredOutput = data.filter(item => {
      switch (item.casa.nombre) {
        case "Dolar Blue":
        case "Dolar Oficial":
        case "Dolar Bolsa":
        case "Dolar Contado con Liqui":
        case "Dolar turista":
        case "Bitcoin":
          return item;
          break;
        default:
          return null;
      }
    })
    let html = "";
    filteredOutput.forEach(item => {
      
      html += "<div class=\"col-12 col-lg-6\">";
      html += "<div class=\"card bg-c-blue order-card\">";
      html += "<div class=\"card-block\">";
      html += "<div class=\"user\">";
      html += "<h6 class= \"nombre\">" + item.casa.nombre + "</h6>";
      html += "<div class=\"row\">";
      html +=  "<div class=\"col-6 text-center\">";
      html += "<p class= \"compra\"> COMPRA " +item.casa.compra + "</p>";
      html += "</div>";
      html +=  "<div class=\"col-6 text-center\">";
      html += "<p class= \"venta\">  <small>VENTA</small><span</span> $ " + item.casa.venta + "</p>";
      html += "</div>";
      html += "</div>";
      html += "</div>";
      html += "</div>";
      html += "</div>";
      html += "</div>";

    })

    document
      .querySelector('#price')
      .insertAdjacentHTML("afterbegin", html);
  });
}

fetchData();

标签： javascriptfetch-api