0

ユーザーが画像を追加すると拡張する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;
}
4

4 に答える 4

1

あなたが説明したのは、次の場合の通常の動作です。

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

...デフォルトでは、adivは可能な限り幅が広く、必要な高さであり、それに続くコンテンツは下にレンダリングされます。

実例| ソース

于 2013-01-28T09:09:51.600 に答える
0

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
}

デモ

于 2013-01-28T09:14:14.603 に答える
0

CSS について疑問に思うときはいつでも、Peter-Paul Koch に会いに行きます -

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

しかし、そのサイトを見つけたくない場合は、ほとんどの場合、display: block;を使用します。ボタンの場合、これにより、上にあるボタンの下にあることが保証されます。

ボタンのセットを水平に配置した場合、それらすべてを div で囲み、それをdisplay: block;にします。各ボタンを表示します: インライン; . そうすれば、グループ全体が上の div の下にプッシュされますが、各ボタンは div 内でインライン化されます。

メイン div の片側または反対側に垂直方向のボタン セットをどうするかは、あなたに任せます。

于 2013-01-28T09:17:11.957 に答える
0

問題は、CSS の次の行です。 

#divCarregando {
    position:absolute;

「絶対に配置されたボックスは通常の流れから外されます」、(私の意見では)ページに絶対的なMAYHEMを作成します。

私の1 番の推奨事項は、配置に頼らずにきれいにフロー化された HTML ドキュメントを使用することabsoluteです。

それができない、またはしない場合、唯一の選択肢は、イメージ コンテナーの下部の位置を再計算し、それをボタン コンテナーの上部に適用することです。

jQuery を使用する (例を簡単にするために、jQuery がなくても確実に可能であるため):

画像を追加する場合:

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

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

価値があるので、使用しないことを強くお勧めしabsoluteます。

于 2013-01-29T04:39:04.420 に答える