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

I'm trying to draw a container which would contain an image (thumbnail) on the left side and a few divs next to the image (vertically: in the middle of the container). They would contain buttons and drop-down lists and, possibly, something else, apart from the plain text.

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

I know I need to use float:left and so on, but no luck for me — doesn't look any good. So I won't even provide an example of what I've achieved. Instead, I will provide my vision:

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

I don't want a table solution, only divs — if it is possible, of course.

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

Could somebody help we with this one?

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

2 个解决方案

#1

Use display: inline-block;. It's basically a hybrid of inline and block behavior. Here's a sample, HTML:

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

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

CSS:

CSS：

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

And a little demo: little link.

还有一点点演示：小链接。

#2

you can create the table view using the div tag also. like this way

您也可以使用div标签创建表格视图。像这样

<div style="display:table">
    <div style="display:table-cell">
       <img src="src" style="width:150px;height:100px;/>
    </div>
    <div style="display:table-cell;vertical-align:middle;" align="center">
       <div> your container1 </div>
    </div>
    <div style="display:table-cell;vertical-align:middle" align="center">
        <div> your container2 </div>
    </div>
</div>