html div縦方向の整列

このdivを縦に整列させるのに助けてください。secondDivがfirstDivになるようにしてください。私は多くの投稿を見ましたが、それを解決できない人は誰でも私のコードを変更してそれを動作させることができます。html div縦方向の整列

<div> 
    <div style="position:relative;width:800px;margin:0;padding:0"> 
     <div id="firstDiv" style="text-align:center;position:absolute;margin-top:0"> 
      <div> 
       <span> 
        <input type="submit" title="" value="Select Photos From Your Computer" 
        name="sendBtn"> 
       </span> 
      </div> 
      <div style="width:492px;height:20px;position:absolute;top:8px;overflow:hidden;z-index:100"> 
       <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data"> 
        <input type="file" style="opacity:0;font-size:20px;" accept="image/*" 
        name="d" id="d"> 
       </form> 
      </div> 
     </div> 
     <div id="secondDiv" style="text-align:center;margin:3px 0 12px;"> 
      <span>You can add upto</span> 
      <span style="font-weight:bold">3 Photos</span> 
     </div> 
    </div> 
</div>

出典

2012-04-18 saravanan shanmugavel

あなたはそれが動作しますfirstDivからposition: absolute;を削除した場合... see here for an example

出典

2012-04-18 09:58:46 ManseUK

私は最初のdivで見ることができますが、私はボタンとファイルの入力を絶対的に見ているので、ユーザーはボタンをクリックしていると信じています。とにかく絶対的なものを取り除かずにこの機能が必要です。 –

@saravananshanmugavel私は本当にあなたがやろうとしていることを理解していない...おそらく、あなたが直面している問題で質問を更新する - – ManseUK

申し訳ありませんyarはそれが感謝した位置を削除した後それを得ました –

> <div id="firstDiv" style="text-align:center;margin-top:0;">

のようにdiv要素に変更firstdiv

出典

2012-04-18 09:58:53

ためposition:absolute;を削除して、あなたはこのようになります出力

enter image description here

出典

2012-04-18 10:00:05

firstDivのスタイル属性から「position：absolute」を削除すると、あなたの質問に答えているようです。

これもまた動きます。だから、あなたが望むものを正確に記述する必要があります。

あなたは何か気が散っていない限り（例えば、メニューバーやウィンドウ内のウィンドウポップアップなど）、position：absoluteとposition：fixedを使用しないでください。したがって、すべての「ポジション：...」と「トップ：...」を削除してください。

なぜ、その不透明度0のファイルを途中で入力したのですか？空のスペースを非表示にして削除したい場合は、それを "display：none"に変更してください（divなどの "display：block"またはスパンのような "display：inline"））

ここでは、不透明度が表示に変更され、すべての位置情報（上：、位置：など）が削除されています。

<html> 
<head> 
<style> 
</style> 
</head> 
<body> 
    <div> 
     <div style="width: 800px; margin: 0px; padding: 0px"> 
      <div id="firstDiv" style="text-align: center; margin-top: 0"> 
       <div> 
        <span> 
         <input type="submit" title="" value="Select Photos From Your Computer" name="sendBtn" /> 
        </span> 
       </div> 
       <div style="width:492px; height:20px; overflow:hidden; z-index:100"> 
        <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data"> 
         <input type="file" style="display: none; font-size:20px;" accept="image/*" name="d" id="d" /> 
        </form> 
       </div> 
      </div> 
      <div id="secondDiv" style="text-align: center; margin: 3px 0 12px;"> 
       You can add up to 
       <span style="font-weight:bold">3 Photos</span> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

の他の回答にご意見を読んだ後、これを試してみてください。http://www.quirksmode.org/dom/inputfile.html http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file

出典

2012-04-18 10:08:02 Peter

ありがとう。どうもありがとう。 –

答えて

関連する問題