画像に表示されているように、ID「wrapper」の div 内に ID「divThumbnail」、「bannerImageProgress」、「divRemoveBanner」の 3 つの div を配置する必要があります。「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>