Попытка отобразить миниатюру img рядом с дисплеем css: inline-block

Question

Я довольно новичок в разработке и нахожусь в тупике после нескольких часов попыток исправить.Ниже приведена часть JS, которая будет отображать миниатюры изображений в формате HTML на основе результатов поиска.После нажатия на миниатюру откроется соответствующее видео на 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, чтобы выровнять изображения бок о бок.Это самое близкое, что я сделал, чтобы заставить их выровняться рядом друг с другом.Если я использую только inline-block, они по-прежнему располагаются вертикально.

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

Ниже приведена часть html, в которой результаты поиска JS / 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 /