Css 是否包装内容并删除多余的空白？

我有一个进退两难的问题，这导致我的网站非常难看，我基本上试图做的是使这些瓷砖包裹得很好，并根据客户的屏幕大小在一行上显示更多的瓷砖

大部分都可以，但如果与中心对齐（瓷砖中心），看起来很糟糕

文本对齐：居中

文本对齐：左

我希望它看起来像什么：

如您所见，左对齐看起来更美观，但有一块非常难看的空白，我要做的是删除该空白或将实际的平铺父对象居中

 <div class='ioholder'>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                    <div class="imghold">
                        <p>
                        Test
                        </p>
                    </div>
                </div>

.ioholder
{
    display:inline-block;
    text-align:left;


    padding:10px;
}

.imghold
{
    vertical-align:top;
    display:inline-block;
    min-width:200px;
    width:200px;
    height:240px;
    max-height:240px;
    margin:4px;
    text-align:left;

    background-color:rgb(240,240,240);
    border-style:solid;
    border-width:1px;
    border-color:rgb(175,175,175);
    border-radius:2px;
}

试验


试验


试验


试验


试验


试验


试验


试验


试验


试验


试验


试验


试验

.ioholder
{
显示：内联块；
文本对齐：左对齐；
填充：10px；
}
伊姆霍尔德先生
{
垂直对齐：顶部；
显示：内联块；
最小宽度：200px；
宽度：200px；
高度：240px；
最大高度：240px；
保证金：4倍；
文本对齐：左对齐；
背景色：rgb（240240）；
边框样式：实心；
边框宽度：1px；
边框颜色：rgb（175175）；
边界半径：2px；
}

我不确定我是否理解您试图实现的目标，因此根据我的理解，我将此添加到CSS中：

.ioholder {
    display:inline-block;
    text-align:center;
    padding:10px;
}

.ioholder > .imghold{
    float: left;
}

---

我建议您使用网格系统，例如Yui3网格——或其他一些网格系统

.imghold{
保证金：5px；
边框：1px纯黑；
高度：100px；
}
.集装箱{
宽度：90%；
左边距：自动；
右边距：自动；
}
.ioholder{
宽度：100%；
背景色：#eee；
}

一
二
三
四
五
六

这看起来是flex Box的一个很好的用例。您可以为框设置不同的重要性级别，这样一些框将展开以填充空白，而其他框则不会。这里有很多很好的例子可以用来学习css技巧

看起来你已经发布了两次相同的图片。啊，我已经发布了，现在已经修复了！我会仔细检查，但如果我没记错的话，你需要一些JS来解决这个问题。尝试了这个方法，它仍然将所有内容对齐到父元素的左侧。这有一个问题，瓷砖必须是所列的确切尺寸，但根据用户屏幕的宽度，每行显示不同数量的瓷砖。-这种方法只是拉伸瓷砖。那么这种方法不适合你。考虑一下：想象一下15英寸和23英寸的显示器。如果您将使用固定宽度的平铺，则在大型显示器上，该平铺将非常小（或在小型显示器上，该平铺将非常大）。这就是为什么我们使用%宽度。Bootstrap使用相同的技术。标记为正确，这似乎是唯一合理工作的方法。尝试过这个方法后，仍然与左对齐方法完全相同，右侧有一大块空白。太棒了，这个方法使网站看起来更好，甚至给了我更大的框，可以完美地填充空白，正确的答案是。谢谢你的帮助@stevob21请让我知道你是如何做到这一点的，一个代码笔将是有用的，或与具体的代码单独回答。我无法理解使用flex box的哪些部分来实现这一点。