Div容器与图像和其他div彼此相邻

Question

我正在尝试绘制一个容器,其中包含左侧的图像(缩略图)和图像旁边的几个div(垂直:在容器的中间).它们将包含按钮和下拉列表,除了纯文本之外,还可能包含其他内容.

我知道我需要使用float:left等等,但对我来说没有运气 - 看起来不是很好.所以我甚至不会举例说明我所取得的成就.相反,我将提供我的愿景:

我不想要一个表格解决方案,只需要div - 如果可能的话,当然.

有人可以用这个来帮助我们吗？

Answer 1

使用display: inline-block;.它基本上是内联和块行为的混合体.这是一个示例,HTML:

<div class = "container">
    <img src = "pic.png" class = "inbl"/>
    <div class = "inbl"></div>
    <div class = "inbl"></div>
</div>

CSS:

.inbl {
    display: inline-block;
    vertical-align: top;
}
.container {
    white-space: nowrap;
}

还有一点点演示:小链接.