2012-04-18 7 views
1

누구든지이 divs를 세로로 정렬하는 데 도움을 줄 수 있습니까? secondDivfirstDiv이 되길 원합니다. 나는 많은 게시물을 보았지만 그것을 해결할 수 없었습니다. 누구든지 내 코드를 변경하여 그것을 작동시킬 수 있습니다.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> 

답변

0

당신이 작동합니다 firstDiv에서 position: absolute;를 제거하면 ... see here for an example

+0

작동 야 그하지만 당신은 내가 버튼을 absoluting 사용자들이 버튼을 클릭하는 것으로 믿고 있도록 입력을 제기하고 처음 사업부에서 볼 수 있습니다. 어쨌든 절대 제거하지 않고이 기능이 필요합니다. 난 정말 해달라고 –

+0

@saravananshanmugavel 당신은 아마도 당신이 직면 할 문제에 귀하의 질문에 업데이트 ... 뭘 하려는지 이해 - 그 후 위치가 감사에게 – ManseUK

+0

미안 YAR 위치에 대한 질문을 묻는 녀석은 일 . 고마워. –

0

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

같은 사업부에서 변경 firstdiv

0

에 대한 position:absolute;을 제거하고이 같은 얻을 것이다 출력

enter image description here

2

firstDiv의 스타일 속성에서 "position : absolute"를 제거하면 질문에 대한 대답 인 것 같습니다.

이렇게하면 물건들이 움직이게됩니다. 그래서 당신이 원하는 것을 정확히 묘사해야합니다.

당신이 뭔가 멋진 일을하지 않는 한 (예 : 메뉴 막대 또는 창 내 창 팝업) position : absolute 및 position : fixed를 사용하지 마십시오. 그래서 모든 "위치 : ..."물건뿐만 아니라 "상단 : ..."을 제거하십시오.

왜 불투명도 0 파일을 중간에 입력 했습니까? (그리고 숨김 해제하는 사업부와 같은 : "디스플레이 블록"() 또는 : 스팬 같은 "디스플레이 인라인"()) : "없음 표시"당신이 숨기고 또한 빈 공간을 제거하려는 경우, 해당을 변경하지

여기서는 불투명도가 표시되도록 변경되었으며 모든 위치 지정 항목 (상단 :, 위치 : 등)이 제거되었습니다.

<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

+0

감사 일한 제거되었다보다는 –