我有一个 div,它会随着用户在其上添加图像而扩展。在 div 下我有一个按钮。当 div 向下扩展时,我需要这个按钮下降。 按钮位置取决于 div 位置。
我希望当用户将照片添加到面板:文件时,divUpload 下降。
HTML:
<form id="form1" runat="server" enctype="multipart/form-data">
<div id="divListFiles">
<asp:FileUpload ID="files" name="files[]" accept='image/*' runat="server" multiple />
<asp:Panel ID="list" name="list" runat="server" Height="107px">
</asp:Panel>
</div>
<div id="divListDel">
<output id="listdel" name="listdel"></output>
</div>
<div id="divCarregando">
<img id="carregando" src="http://bps.saude.gov.br/visao/img/carregando.gif" alt="Carregando..">
</div>
<div id="divNumImages">
<asp:TextBox ID="txbNumImages" runat="server"></asp:TextBox>
</div>
<div id="divUpload">
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="ShowCarregando()" OnClick="btnUpload_Click" />
</div>
CSS:
divListFiles {
position:absolute;
left:9px;
top:99px;
width:653px;
height:105px;
z-index:1;
}
#divListDel {
position:absolute;
left:81px;
top:73px;
width:627px;
height:33px;
z-index:1;
text-align: left;
}
#divCarregando {
position:absolute;
left:7px;
top:113px;
width:423px;
height:231px;
z-index:-1;
text-align: left;
}
#divNumImages {
position:absolute;
left:9px;
top:100px;
width:123px;
height:27px;
z-index:5;
text-align: left;
}
#divUpload {
position:relative;
left:19px;
top:241px;
width:65px;
height:27px;
z-index:1;
text-align: left;
}
#form1{
height: 303px;
}
#carregando{
visibility:hidden;
}
.thumb {
height:65px;
width:90px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
.thumbdel {
height: 17px;
width: 17px;
margin: 60px 81px 0 0;
}
最佳答案
您所描述的是以下情况的正常行为:
<div><!-- ...the images here ... --></div>
<button>The Button</button>
...默认情况下,div
尽可能宽,根据需要尽可能高,其后的内容呈现在下方。
关于javascript - 相对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14558671/