在包含 div 的一个内联显示的两个图像旁边放置一个 div答案

【问题标题】：Position a div next to two images that are displayed inline in one containing div在包含 div 的一个内联显示的两个图像旁边放置一个 div
【发布时间】：2013-03-25 01:58:24
【问题描述】：

考虑以下site。

我试图在女人的图片旁边放置一个大约 300 像素宽、大约 400 像素高的 div。我试图将 div 显示为内联但无济于事。我试图向左飘，但又一次没有运气。有什么想法吗？

【问题讨论】：

标签： css image html position inline

【解决方案1】：

您可以使用以下 CSS 将其放置在图片旁边：

.emailForm {
    width: 260px; /* anything above 260px will fall over to the next line */
    /*float: right;*/ /* remove float */
    display: inline-block; /* inline-block since you want specific width and height */
    height: 434px;
    border: 1px solid black;
}

注意：很确定您正在使用它，但如果您没有使用，请使用 Firebug 或 Chrome 开发工具来轻松完成此类任务。

【讨论】：

谢谢，这似乎解决了它。我尝试使用 inline-block 但什么也没发生，我猜是因为宽度太大了。我稍微调整了元素的尺寸，一切正常。

【解决方案2】：

试试这个，

 <div id="wrap">
 <div id="nextTo"></div>
 <img id="woman" src="#" width="600px" height="400px" />
 </div>

CSS

 #wrap {width: 1000px; margin: 0 auto;}
 #nextTo {float: right; max-height: 400px;}

这将确保您的图片是固定宽度的。例如，如果您有一个 1000 像素宽的包装 div，#nextTo div 将是图像占用的其余部分（在我的示例中为 400 像素）。

将max-height 属性添加到#nextTo div 可确保该div 不会落在图像下方，但不确定这是否是您所追求的。

【讨论】：