具有图像和其他 div 彼此相邻的 div 容器[关闭]答案

【问题标题】：Div container with image and other divs next to each other [closed]具有图像和其他 div 彼此相邻的 div 容器[关闭]
【发布时间】：2012-09-13 22:05:49
【问题描述】：

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

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

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

有人可以帮我们解决这个问题吗？

【问题讨论】：

向我们展示您迄今为止所做的尝试。我们不是来为您工作的，我们是来帮助解决问题代码的。
这不是一个模糊的问题，这正是我的问题。感谢发帖。

标签： html css css-float alignment stylesheet

【解决方案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。

【讨论】：

所以，如果我理解正确，使用 inline-block'ing 你不需要任何浮点数？
@Dmitri 是的，您根本不需要任何花车——如果您愿意，请查看演示。
我看过demo，效果非常好！非常感谢。非常好的、干净和简单的解决方案。
我不知道你是否还能读到这个：你的解决方案有效，但是，我想知道，我怎么能使用浮点数。我想在左边有一个图像，在右边有一个 div2 （见图），并且那个 DIV 垂直对齐到中间。你能帮我解决这个问题吗？
@Dmitri 你有没有尝试改变vertical-align: top;在 CSS 中到 middle?

【解决方案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>

【讨论】：

这个解决方案有什么问题？
好吧，首先，不是我对你的答案投了反对票。我认为这可能与以下原因有关：您使用了通常不推荐使用的内联样式，您使用了已弃用的 align 属性，并且它比使用 display: inline-block; 更复杂一些。同样，不是我拒绝了你的答案，我认为它在概念上是有效的。
@Abody97 我不怪你，但一个负面的选民应该发表一些评论，所以至少我们知道我的回答有什么问题，我也从中学到了，实际上我很少使用 html 和 css .
感谢您提供的解决方案。我不知道谁投了反对票，但不是我！再次感谢您！