html - 具有图像和其他 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;
}

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

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>