相對位置

Question

我有一個隨着用戶在其上添加圖像而擴展的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;
}

Answer 1

您所描述的將是以下情況的正常行為：

<div><!-- ...the images here ... --></div>
<button>The Button</button>

...默認情況下， div盡可能寬，需要的高度很高，其后的內容將在下面呈現。

現場示例 | 資源

Answer 2

的HTML

<div class="wrap">
<div class="innner">nfdj</div>
<button>Click</button>
</div>

的CSS

.wrap{
    width:250px;
    background:green;
    height:auto;
}
div{
    width:100%;
    height:150px;
    background:grey
}

演示

Answer 3

每當我對CSS感到疑惑時，我都會去拜訪Peter-Paul Koch-

http://www.quirksmode.org/css/display.html

但是如果您不想發現該站點，那么在大多數情況下，我將使用display：block; 按鈕，它將確保它位於上方的按鈕下方。

如果我有一組水平排列的按鈕，我會將它們全部封裝在一個顯示為div的div內。 並使每個按鈕顯示：inline; 。 這樣，整個組就會被推到上方的div下面，但是每個按鈕都在div內聯。

我將讓您研究在主div的一側或另一側使用一組垂直按鈕的處理方式。

Answer 4

問題是CSS中的這些行：

#divCarregando {
    position:absolute;

“絕對定位的框已從正常流程中移出” ，這（在我看來）在您的頁面上創建了絕對MAYHEM。

我的＃1建議是使用流程流暢的HTML文檔，而不必求助於absolute定位。

如果您不能這樣做，則唯一的選擇是重新計算圖像容器的底部位置並將其應用於按鈕容器的頂部。

使用jQuery（僅出於簡化示例，因為沒有它當然可以實現）：

添加圖像時：

var images = $( "#divCarregando" ),
    position = images.offset();

$( "#divUpload" ).css({
    "top": position.top + images.outerHeight( true )
});

對於它的價值，我強烈建議不要使用absolute 。