具有图像和其他div的div容器彼此相邻 [英] Div container with image and other divs next to each other

问题描述

我正在尝试绘制一个容器，该容器的左侧应包含一个图像（缩略图），该图像旁边应包含一些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.

我知道我需要使用 float：left 等等，但是对我来说没有运气吗？看起来没有任何好处。因此，我什至不提供我所取得的成就的例子。相反，我将提供我的愿景：

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:

我不想要一个表解决方案，只希望使用divs-当然可以。

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

有人可以帮助我们吗？

推荐答案

使用 display：inline-block; 。它基本上是内联和屏蔽行为的混合体。以下是HTML示例：

Use display: inline-block;. It's basically a hybrid of inline and block behavior. Here's a sample, 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;
}

还有一个小样：小链接。

这篇关于具有图像和其他div的div容器彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！