小编Com*_*ter的帖子

在我的网站中，我有一个搜索，它以卡片格式输出结果，如下所示：

然而，当显示多个结果时，它们不会溢出到下一行，而是卡片保持在同一行并变得更薄，并且卡片内的内容看起来很难看。它变得更像这样： 。

div卡代码：

<div class="card">
 <a href="#">
  <div class="image">
   <div class="title">

   </div>
  </div>
 </a>
 <div class="description">
  <h5>Title</h5>
  <p>Description</p>
 </div>
</div>

以及卡片 div 的 CSS（我认为图像和描述 div css 在这里并不重要）：

.card
{
  height:18em;
  width:14em;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

正如您所看到的，div 是flex对象，我已经添加了该flex-wrap: wrap属性，但它没有换行。我还尝试了其他解决方案，例如display: inlineordisplay: inline-block或float: left，但都不起作用（我从网上获得了所有这些解决方案，主要是 Stack Overflow，但由于它们不起作用，我不得不就这个问题发表另一篇文章）。

有人可以帮我解决这个问题吗？请记住，结果是通过搜索输出的，因此不可能通过例如换行等方式手动修复换行。

谢谢！

假设我想从搜索“hi google”中抓取结果（只是一个例子）。我正在使用带有 Node.js 的 Puppeteer 进行抓取。我使用以下代码：

const puppeteer = require('puppeteer');
scrape = async function () {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto("https://www.google.com/search?q=hi+google&rlz=1C1CHBF_enUS879US879&oq=hi+google&aqs=chrome..69i57j0l3j46j69i60l3.1667j0j7&sourceid=chrome&ie=UTF-8", { waitUntil: "networkidle2" });
    await page.setViewport({ width: 1366, height: 663 });
    await page.waitForSelector('.xpd');
    let data = await page.evaluate(() => {
        
        return document.querySelectorAll('.xpd')[16];

    });
    await browser.close();
    return data;

}
scrape()
    .then(function(result) {
        console.log(result);
    })

当浏览器启动时，它会立即转到 reCAPTCHA 页面： 有没有办法超越这个问题？我在网上做了一些研究，但这些结果要么是 1. 非常理论化，我不知道如何在我的代码中实现这些，要么 2. Python 解决方案，我不确定其中一些解决方案会如何傀儡师。我遇到的最有用的结果是随机定时抓取以使请求看起来像人类，但正如您所看到的，即使只检索一个数据元素也不起作用，它只会立即将您带到 reCAPTCHA 页面。

谢谢。