未确定数量的图像，并排，以适应容器宽度答案

【问题标题】：undetermined number of images, side by side, to fit container width未确定数量的图像，并排，以适应容器宽度
【发布时间】：2020-07-13 07:06:09
【问题描述】：

我有几个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>

【问题讨论】：

标签： html css flexbox

【解决方案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/

【讨论】：

【解决方案2】：

为什么不能添加容器？

你可以添加一些样式：

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

如果图像是环绕的，您可以添加width 属性。

【讨论】：

【解决方案3】：

尝试将 style="display:inline-block" 添加到您的标签中。

【讨论】：

【解决方案4】：

为了并排显示图片，你可以添加css到img like

img
{
    float: left;
}

【讨论】：