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

Question

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

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

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

有人可以帮助我们吗？

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;
}

还有一个小小的演示：little link。

Answer 2

您也可以使用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>