div的问题

Question

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

这些设置中的每一个都需要彼此相邻。因此，所有的主要包装都会彼此相邻，就像它们漂浮在左侧的东西一样。

我怎样才能让它按照我需要的方式工作呢？

如果我将mainwrap设置为width:100%，那么个别包裹就是我需要它们但是然后主包裹占用100%并且我不能再坐在它旁边的另一个主包裹上等等。

我希望这是半睡半醒的

HTML：

<div class="mainwrap">
<div class=" grow">image</div>

<div class="individualwrap">link</div>
<div class="individualwrap">link</div>

</div>

CSS：

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

我做了一个图像来展示我的想法

www.techagesite.com/idea.png http://www.techagesite.com/idea.png

Answer 1

我已经浮动了mainwrap元素，你可以有一个盒子显示。我也将div与中心的链接对齐。结果可以在这个小提琴中找到。 （对于图像，我举了一个例子，它只显示了一个文本）。

jsFiddle示例。

.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表现为按钮，则将其设置为按钮。您可以使用互联网上的足够示例，例如this one。