Html 与div有关的问题

我有大约20个这样的设置如下。 每一个包含一个图像和2个链接 我需要每个div中都有一个链接来堆叠并保持这样，这些链接堆叠在grow div下，其中有一个图像

这些设置中的每一个都需要挨着坐。因此，所有的主包装将彼此相邻，就像它们是浮动的左侧类型的东西

我怎样才能拥有它，让它按我所需要的方式工作

如果我将mainwrap设置为width:100%，则各个包裹的放置方式与我所需的不同，但是mainwrap占据了100%，我无法将另一个mainwrap放置在它旁边，以此类推

我希望这是有道理的，因为我半睡着了

HTML:

我制作了一张图片来表达我的想法

我已经浮动了mainwrap元素，您可以有一个方框显示。我还将div与中间的链接对齐。结果可以在这把小提琴上找到。对于图像，我举了一个例子，它比只显示文本更好

例如

.mainwrap {
    float: left;
}
.grow{
    margin:0 4px;
    height: 177px;
    width: 100px;
    overflow:hidden;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.individualwrap {
    text-align: center;
}

---

如果希望.individualwrap的行为与按钮相同，请将其设置为按钮样式。互联网上有足够多的例子，你可以使用，比如。

你需要什么样的浏览器支持？好的，但如果你尝试过，告诉我们它是如何工作的，不仅仅是你希望它是如何工作的，从来没有听说过css列，那么我打算如何搜索它们。在过去的20年里，在我所有的div搜索中，我从来没有在一个页面上找到css列。如果我能搜索到一个有答案的页面，我就不会在这里了。@Techagesite我不知道你到底想要什么，像这样的@是的，像那样的朋友。干杯，我现在可以用了

.grow {
    display: inline-block;
    margin: 0 auto;
    height: 177px;
    width: 100px;
    overflow: hidden;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.mainwrap {
    float: left;
}
.grow{
    margin:0 4px;
    height: 177px;
    width: 100px;
    overflow:hidden;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.individualwrap {
    text-align: center;
}