Question

我有一个页面，显示要出售的多种宠物。填写表单后，使用循环将它们放置在页面上。现在，当我尝试将项目放置到网格中并使它们显示为每行3个项目时，它不起作用，而是将它们全部放在一列中。如何从循环中获取项目以在网格中显示？

const request = require('request');
const fs = require('fs');

function sendRequest(imageData) {
    const uriBase = 'https://eastus.api.cognitive.microsoft.com/face/v1.0/detect';

    // Request parameters.
    const params = {
        'returnFaceId': 'true',
        'returnFaceLandmarks': 'false',
        'returnFaceAttributes': ''
    };

    const options = {
        uri: uriBase,
        qs: params,
        body: fs.readFileSync(imgData),
        headers: {
          'Content-Type': 'application/octet-stream',
          'Ocp-Apim-Subscription-Key': subscriptionKey
        }
    };

    request.post(options, (error, response, body) => {
      if (error) {
        console.log('Error: ', error);
        return;
      }
      let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
      returnData = jsonResponse;
    });
    return returnData;
}

Answer 1

您的CSS类很可能使事情变得混乱。我整理了HTML的结构，并使用flexbox对齐了col-auto类。

尝试一下：

HTML：



 <div class="container">
        <div class="row">
           // for each in items do |item|
            <div class="col-auto">
                <h1>{item.name}</h1>
                <span>£ {item.price}</span>
                <span>{item.description}<span>
                <span>{item.location}<span>  
                <div>
                    <a href="#0">View More</a>
                </div>
            </div>
           // end loop
        </div>
    </div>

CSS：

.col-auto{
    display: block;
    margin: auto;
    width: 33%;
    border: 1px solid #ccc;
}

.row{
    display: flex;
    margin: 0 auto;
    width: 100vw;
    flex-direction: row;
}

如何将循环生成的项目放在flexbox的页面上？

1 个答案: