CSS：当内联块子项包裹

Question

如何使容器元素仅使用＆＃34; required＆＃34;空间包裹内联块儿童？见下图...

您可以看到箭头如何穿过不需要的空间。我已经花了几个小时试图让它发挥作用。我甚至试过了几个很好的答案，比如这个......

Fit div width to inline-block children

但它似乎并不适合我的情况，因为它假定每行有固定数量的孩子。

下面的小提琴手说明了我面临的问题。但是，有一点需要注意，max-width的{​​{1}}应该设置为.box而不是%

＆＃13;

＆＃13;

px

＆＃13;

html,
body {
    background-color: #eee;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.container {
    display: block;
    width: 100%;
}

.box {
    display: inline-block;
    /*
    In the production "max-width" will be set to a percentage value rather than px units
    Using pixels here just for illustration purposes
    */
    max-width: 380px;
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.img-wrapper {
}

.img-wrapper span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border-radius: 10px;
}

.img-wrapper img {
    max-width: 196px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

＆＃13;

＆＃13;

＆＃13;

问题

基本上，我想要实现的是让父/容器元素在子项<div class="container"> <div class="box"> <p> Lorem ipsum dolor sit amet </p> <div class="img-wrapper"> <span> <img src="https://i.imgur.com/yvMCRsv.jpg" /> </span> <span> <img src="https://i.imgur.com/efFdd14.jpg" /> </span> <span> <img src="https://i.imgur.com/7Yv987J.jpg" /> </span> </div> </div> </div>时只使用必要的空格（欢迎使用浮点数）

Answer 1

这里是Fiddle，有工作解决方案

我基本上做了那件事，

• 在float: left;
中添加了margin: 0px 5px 5px 0px;和.img-wrapper span{}
• 为:nth-of-type()
添加了.img-wrapper span{}选择器

代码：

.img-wrapper span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border-radius: 10px;
    float: left;
    margin: 0px 5px 5px 0px;
}

.img-wrapper span:nth-of-type(2n + 1){
  clear: left;
}