尝试将缩略图 img 与 css 显示并排显示：内联块

Question

我对开发还很陌生，在花了几个小时试图修复后，我对此感到困惑。下面是JS的一部分，它将根据搜索结果以html显示缩略图img。一旦点击缩略图，它就会打开一个相关的youtube视频，但我的问题是如何将这些img并排排列？我从下方的CSS中获得的当前结果

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来并排对齐图像。这是我最接近让它们并排排列的一次。如果我只使用内联块，它们仍然垂直堆叠。

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

下面是JS搜索结果.html发布到的html的一部分，fyi。

<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

附言：对于这种布局，我建议使用css flexbox/grid方法。请参阅此处：

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