1. 首頁
  2. 問答
  3. DIV絕對定位在不同窗口大小或

DIV絕對定位在不同窗口大小或

2014-02-19 28 views
-1

分辨率不能正常工作，請參考下面撥弄DIV絕對定位在不同窗口大小或

http://fiddle.jshell.net/LHZDh/2/

代碼：

<body> 

    <div style="position: relative; left: -5px; top: 18px;"><img id="ImgTachoMetre" src="/Images/u174_normal.png"/></div> 


<div class="report_area" style="width: 1011px;"> 





<table class="NNACorporateSectiontop"> 
    <tbody><tr> 

     <td> 
      <div class="ActionItems_wrapper row0 box bordered span4 dbBG"> 
       <span class="title" style="background-color: #C71444; background-image:none; color:White;"><strong>Action Items</strong></span> 
       <div class="component-body"> 



    <div class="HotAlertRoot"> 


     <table class="HotAlerts" align="center"> 
      <tbody><tr> 
       <td>Total Open 
       </td> 
       <td> 


        <a class="redirectLink" href="/?Length=0">177</a> 
       </td> 

      </tr> 
      <tr> 
       <td> 
        Recent: 0 - 3 Days 
       </td> 
       <td class="NNABoldText"> 
        0 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Serious: 4 - 7 Days 
       </td> 
       <td class="NNABoldText"> 
        0 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Critical: &gt; 7 Days 
       </td> 
       <td class="NNABoldText"> 
        177 
       </td> 
      </tr> 

     </tbody></table> 

     <table class="HotAlertsDept"> 
      <tbody><tr> 
       <td></td> 
       <td> 
        Sales 
       </td> 
       <td> 
        Service 
       </td> 
      </tr> 
      <tr> 

       <td>Total Open 

       </td> 
       <td> 



        <a href="/">65</a> 
       </td> 
       <td> 

        <a href="/">112</a> 
       </td> 
      </tr> 
     </tbody></table> 

     <div class="GreyArea"></div> 


     <div class="CorpPerformance Alert"> 
      <div class="row"> 
       <div class="CvalPending"> 
        Pending 


        <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

       </div> 
       <div> 
        &lt;5 Days to Edit Email 

       </div> 
       <div> 
        <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

       </div> 
      </div> 
     </div> 

     <table class="HotAlertsDept"> 
      <tbody><tr> 
       <td></td> 
       <td> 
        Sales 
       </td> 
       <td> 
        Service 
       </td> 
      </tr> 

      <tr> 

       <td>Total 

       </td> 
       <td> 
        <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

       </td> 
       <td> 

        <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Service" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

       </td> 
      </tr> 
     </tbody></table> 

    </div> 

       </div> 
      </div> 
     </td> 


    </tr> 
</tbody></table> 

</div> 
    </body>

我需要把圖標actionitems節的右上角。請參閱下面的預期圖片。

enter image description here

但它是不對齊的一些決議或窗口大小的變化。

錯位截圖：

enter image description here

我怎樣才能解決這一問題？

來源

2014-02-19 SivaRajini

+0

你將需要更新你的小提琴：目前的圖像不工作！ – johnkavanagh

+0

@ john這是dummay圖像。你可以請嘗試與dummay形象，並把這個正確的位置爲所有窗口大小 – SivaRajini

回答

0

使用「margin」而不是「left」和「top」。

http://fiddle.jshell.net/LHZDh/2/

代碼：

<body> 

    <div style="position: relative; margin: 18px 0 0 -5px; "> 
     <img id="ImgTachoMetre" src="/Images/u174_normal.png"/> 
    </div> 


    <div class="report_area" style="width: 1011px;"> 





     <table class="NNACorporateSectiontop"> 
      <tbody> 
       <tr> 

        <td> 
         <div class="ActionItems_wrapper row0 box bordered span4 dbBG"> 
          <span class="title" style="background-color: #C71444; background-image:none; color:White;"> 
           <strong>Action Items</strong> 
          </span> 
          <div class="component-body"> 



           <div class="HotAlertRoot"> 


            <table class="HotAlerts" align="center"> 
             <tbody> 
              <tr> 
               <td>Total Open 
               </td> 
               <td> 


                <a class="redirectLink" href="/?Length=0">177</a> 
               </td> 

              </tr> 
              <tr> 
               <td> 
        Recent: 0 - 3 Days 
               </td> 
               <td class="NNABoldText"> 
        0 
               </td> 
              </tr> 
              <tr> 
               <td> 
        Serious: 4 - 7 Days 
               </td> 
               <td class="NNABoldText"> 
        0 
               </td> 
              </tr> 
              <tr> 
               <td> 
        Critical: &gt; 7 Days 
               </td> 
               <td class="NNABoldText"> 
        177 
               </td> 
              </tr> 

             </tbody> 
            </table> 

            <table class="HotAlertsDept"> 
             <tbody> 
              <tr> 
               <td/> 
               <td> 
        Sales 
               </td> 
               <td> 
        Service 
               </td> 
              </tr> 
              <tr> 

               <td>Total Open 

               </td> 
               <td> 



                <a href="/">65</a> 
               </td> 
               <td> 

                <a href="/">112</a> 
               </td> 
              </tr> 
             </tbody> 
            </table> 

            <div class="GreyArea"/> 


            <div class="CorpPerformance Alert"> 
             <div class="row"> 
              <div class="CvalPending"> 
        Pending 


               <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

              </div> 
              <div> 
        &lt;5 Days to Edit Email 

              </div> 
              <div> 
               <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="All" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

              </div> 
             </div> 
            </div> 

            <table class="HotAlertsDept"> 
             <tbody> 
              <tr> 
               <td/> 
               <td> 
        Sales 
               </td> 
               <td> 
        Service 
               </td> 
              </tr> 

              <tr> 

               <td>Total 

               </td> 
               <td> 
                <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

               </td> 
               <td> 

                <a class="redirectLink" data-criteria-awaitingemailupdate="1" data-criteria-department="Service" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[February 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/Disposition">0</a> 

               </td> 
              </tr> 
             </tbody> 
            </table> 

           </div> 

          </div> 
         </div> 
        </td> 


       </tr> 
      </tbody> 
     </table> 

    </div> 
</body>

如果你想不影響 「行動項目」 的位置，使用 「的位置是：絕對」 爲parrent股利。

來源

2014-02-19 17:08:08 veysiertekin

+0

它將如何工作的所有情況？對於我需要在所有窗口大小和屏幕分辨率下工作？ – SivaRajini

+0

你應該知道你的「#ImgTachoMetre」大小，並找到他們的厭惡和半數值。例如，您的圖片尺寸爲200x400（widthxheight），您的左/頂值將爲; left = width/2 = 100px，top = height/2 = 200px。最後加上保證金;像這樣：「margin：200px 0 0 100px」 – veysiertekin

0

添加兩個<div>就像這一點，並刪除此/>：

<body> 
<div> 
    <div style="position: relative; left: -5px; top: 18px;"><img id="ImgTachoMetre" src="/Images/u174_normal.png"></div> 


<div class="report_area" style="width: 1011px;"> 

</div>

來源

2014-02-19 17:12:23 PCJackson

+0

我無法得到您的答案？你可以請更具體 – SivaRajini

+0

你需要把你的照片和report_area在一個容器。 – PCJackson

+0

只是一個猜測，嗯.. – PCJackson

0

如果你想#ImgTachoMetre相對於.ActionItems_wrapper定位，那麼你也許應該把它放在裏面，或者至少之前或之後所以他們有相同的父母，他們都可以相對於同一個元素進行定位。 試試看看最適合你的是什麼。這當然不是一條規則，但這是一個很好的做法。

來源

2014-02-19 17:26:36 xpy

+0

謝謝。請您修改我的小提琴accroding您的解決方案？ – SivaRajini

+0

@SivaRajini即使我這樣做，小提琴看起來很破碎，它不會有任何區別，您可以在本地版本上做一點實驗。 – xpy

相關問題

 相關問題