javascript - 尝试并排显示缩略图 img 与 css 显示 : inline-block

Question

我对开发还很陌生，在花了几个小时尝试修复后，我被这个问题难住了。下面是 JS 的一部分，它将根据搜索结果以 html 格式显示缩略图 img。单击缩略图后，它会打开相关的 youtube 视频，但我的问题是如何将这些 img 并排排列？ Current results I get from my CSS below

function renderResult(meal) {
  return `
    <div class="meal-wrapper">
      <p class="meal-name">${meal.strMeal}</p>
      <a href="#ingredients-modal" rel="modal:open">
        <p class="meal-video">Click to see ingredients & instructions!</p>
      </a> 
      <a data-fancybox="gallery" href="${meal.strYoutube}">
        <img src="${meal.strMealThumb}" class="meal-thumbnail-image">
      </a> 
    </div>`
}

我已将 CSS 设置为并排对齐图像。这是我最接近让它们彼此对齐的一次。如果我只使用内联 block ，它们仍然垂直堆叠。

.meal-thumbnail-image, .drink-thumbnail-image 
{
  display: inline-block;
  float: left;
  margin-right: 50px;
  width: 12%;
  border-radius: 10px;
}

以下是 JS 搜索结果/html 发布到的 html 的一部分，仅供引用。

<main class="main" role="main" aria-live="assertive" hidden>
    <h2>Find your dinner video below!</h2>
    <div class="js-meal-search-results"></div>
</main>

我还很新，所以我很感激任何建议。非常感谢!!!

Answer 1

请将下面的 css 添加到包装器中，如下所示:

.meal-wrapper{
    float:left;
    width:25%;
}

https://codepen.io/rameshvr/pen/yQQxWM

PS:对于这种布局，我建议使用 css flexbox/grid 方法。请引用这里:

• > https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• > https://css-tricks.com/snippets/css/complete-guide-grid/