css - 将div放置在另一个动态尺寸div旁边

我需要将三个ID为“ divThumbnail”，“ bannerImageProgress”和“ divRemoveBanner”的div放置在div中，其ID为“ wrapper”，如图所示。加载到“ divThumbnail” div中的是一个图像，该图像可能会改变大小。我需要“ bannerImageProgress”位于“ divThumbnail”左侧，而“ divRemoveBanner”位于其下方。由于divThumbnail的大小可以动态更改，因此定义绝对位置（如代码中所示）不会产生所需的行为。

这就是我需要的方式：[图像旁边有进度条的div，图像下方有删除词的div]



对于方形图像，图像旁边未显示“ bannerImageProgress” div：



到目前为止，我的HTML代码：

    <div id="wrapper" class="image-area-container">
       <div id="divThumbnail" class="image_outer_div" style="width: 200px; height: 60px; ">
           @if ( Model.HasBanner ) {
           <img id = "bannerThumbnail" src = "@Model.BannerLink" />
           }
       </div>
       <div id = "bannerImageProgress" class = "progress progress-success" style="display: inline-block; float: left; left: 566px;">
           <div id = "bannerImage" class = "bar" style = "float: left; width: 0%;" data-percentage="0">
           </div>
       </div>

       <div id="divRemoveBanner" style="display:none;">
        <a id="removeBanner">Remove</a>
       </div>
    </div>

CSS:

<!-- language: lang-css -->

    .image-area-container {
        float: left;
        width: 65px;
        margin-left: 10px;
    }

    .image_outer_div {
        height: 60px;
        overflow: hidden;
        width: 200px;
        vertical-align: top;
        margin-bottom: 5px;
    }

    .image_area .progress {
        left: 346px;
        position: absolute;
        top: 4px;
        width: 200px;
     }

提前致谢！ :)

应用阿里建议的更改后：

进行得不好。现在，“ divThumbnail” div和“ bannerImageProgress” div重叠了：(像这样：-



更改后的代码：

<div class="image-area-container" style="position:relative; width: 400px;">

                        <div id="divThumbnail" class="image_outer_div" style="width: 200px; height: 60px; float: left; ">
                            @if (Model.HasBanner)
                            {
                                <img id="bannerThumbnail" src="@Model.BannerLink" />
                            }

                        </div>

                        <div id="bannerImageProgress" class="progress progress-success" style="display: inline-block; clear:both; position:absolute; left:0; right:0;">
                            <div id="bannerImage" class="bar" style="float: left; width: 0%;" data-percentage="0">
                            </div>
                        </div>

                    <div id="divRemoveBanner" style="display:none; clear:both; float: left;">
                        <a id="removeBanner">Remove</a>
                    </div>

                </div>

最佳答案

您为什么不将进度条向右浮动而另两个向左浮动呢？
要么
给图像另一个具有固定宽度的div包装器？

关于css - 将div放置在另一个动态尺寸div旁边，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15129444/