неопределенное количество изображений, расположенных рядом, чтобы соответствовать ширине контейнера

Question

У меня есть несколько тегов img (количество изображений может варьироваться от 1 до 3). Я не могу добавить вокруг них контейнер, их нужно ставить напрямую, как показано ниже. Я бы хотел, чтобы изображения располагались рядом и соответствовали ширине содержащего div.

Как этого добиться?

<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab" id="tab-description" role="tabpanel" aria-labelledby="tab-title-description" style="display: none;">
                    
<h2>Description</h2>

    <p>Short henley made of 180 g/m2 organic cotton rib jersey.<br>
    Cotton button tape and red overstitch.<br>
    100% ” GOTS ” certified organic cotton.<br>
    Quality garment made in Portugal.</p>

    <p>All our products are pre-washed to avoid shrinking.<br>
    Machine wash 30°c using Marseille soap or black soap detergent.<br>
    No softener, it reduces the absorption capacity of cotton.<br>
    Do not tumble dry.<br>

    <img src="https://cdn.shopify.com/s/files/1/0788/7793/files/gots-logo_sw_2018-01_large.png"><br>
    <img src="https://cdn.shopify.com/s/files/1/0788/7793/files/gots-logo_sw_2018-01_large.png"><br>
    <img src="https://cdn.shopify.com/s/files/1/0788/7793/files/gots-logo_sw_2018-01_large.png">

  </p>
</div>

Answer 1

Вы можете использовать псевдокласс :nth-last-child().

.container > div {
  background: blue;
  display: inline-block;
  height: 100px;
  margin: 1rem;
  width: 100px;
}
.box:first-child:nth-last-child(2),
.box:first-child:nth-last-child(2) ~ .box {
  width: calc(100% - 2rem);
}
.box:first-child:nth-last-child(2),
.box:first-child:nth-last-child(2) ~ .box {
  width: calc(50% - 2rem);
}
.box:first-child:nth-last-child(3),
.box:first-child:nth-last-child(3) ~ .box {
    width: calc(30% - 2rem);
}

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Кредит переходит на Lea Verou:

https://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

Answer 2

Для отображения изображений рядом, вы можете добавить css в img, например

img
{
    float: left;
}

Answer 3

Попробуйте добавить style = "display: inline-block" в свои теги.

Answer 4

Почему вы не можете добавить контейнер?

вы можете добавить какой-нибудь стиль:

<style>
    img {
        display: inline;
    }
</style>

и вы можете добавить свойство width, если изображения переносятся.