與div寬度問題

Question

我正在使用以下佈局類型。

所有的元素都div與背景圖像和文本的另一個圖像。 佈局在Kindle Fire HD（800 X 1280 px）上出現問題。儘管用於下面兩個div的所有參數都與上述兩個div相同，但底部的兩個按鈕從左側縮短。

我想要所有的div的寬度是相同的。任何幫助，請..

相關的HTML代碼的div

<div id="div1" ></div> 
    <div id="div1Text" ></div> 

    <div id="div2"> </div> 
    <div id="div2Text"> </div> 

    <div id="pieChart" style="background-color:nil;"><canvas id="can" style="background-color:nil; margin-top:5px; margin-left:5px;"></canvas></div> 

    <div id="div3" > </div> 
    <div id="div3Text" > </div> 

    <div id="div4" ></div> 
    <div id="div4Text"></div> 

的CSS塊的Kindle Fire HD

@media only screen and (device-width : 800px) and (device-height : 1280px) and (orientation : 
portrait) { 
#div1 { 
    background-image: 
     url(../ScreenImages/iPad@2x/common/BTN.png); 
    position: absolute; 
    width: 428px; 
    height: 74px; 
    background-size: 428px 74px; 
    margin-top: 240px; 
    margin-left: 186px; 
} 
#div1Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text1.png); 
    position: absolute; 
    width: 336px; 
    height: 28px; 
    background-size: 336px 28px; 
    margin-top: 255px; 
    margin-left: 232px; 
} 
#div2 { 
    background-image: 
     url(../ScreenImages/iPad@2x/common/BTN.png); 
    position: absolute; 
    width: 428px; 
    height: 74px; 
    background-size: 428px 74px; 
    margin-top: 350px; 
    margin-left: 186px; 
} 
#div2Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text2.png); 
    position: absolute; 
    width: 231px; 
    height: 28px; 
    background-size: 231px 28px; 
    margin-top: 365px; 
    margin-left: 284px; 
} 
#pieChart { 
    background-image: url(../ScreenImages/iPad@2x/home/Progress-Wheel.png); 
    position: absolute; 
    width: 288px; 
    height: 288px; 
    background-size: 288px 288px; 
    margin-top: 460px; 
    margin-left: 256px; 
} 
#div3 { 
    background-image: 
     url(../ScreenImages/iPad/victor/BTN.png); 
    position: absolute; 
    width: 428px; 
    height: 74px; 
    background-size: 428px 74px; 
    margin-top: 800px; 
    margin-left: 186px; 
} 

#div3Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text3.png); 
    position: absolute; 
    width: 176px; 
    height: 28px; 
    background-size: 176px 28px; 
    margin-top: 815px; 
    margin-left: 312px; 
} 


#div4 { 
    background-image: 
     url(../ScreenImages/iPad/victor/BTN.png); 
    position: absolute; 
    width: 428px; 
    height: 74px; 
    background-size: 428px 74px; 
    margin-top: 910px; 
    margin-left: 186px; 
} 

#div4Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text4.png); 
    position: absolute; 
    width: 211px; 
    height: 28px; 
    background-size: 211px 28px; 
    margin-top: 925px; 
    margin-left: 294px; 
} 
} 

Answer 1

position:absolute應使用幾次。你應該使用position:relative。它可以讓你節省計算距離頂部和左側的時間。

如果你想爲中心的DIV，你應該使用這樣的：

margin-left: auto; 
margin-right: auto; 

此外，如果你的#divXText應該是你的#divX裏面，你應該明確地聲明它在你的HTML：

<div id="divX" > 
    <div id="divXText"></div> 
</div> 

這裏是我的建議：

HTML：

<div id="div1"> 
    <div id="div1Text"></div> 
</div> 

<div id="div2"> 
    <div id="div2Text"></div> 
</div> 

<div id="pieChart" style="background-color:nil;"><canvas id="can" style="background-color:nil; margin-top:5px; margin-left:5px;"></canvas></div> 

<div id="div3"> 
    <div id="div3Text"></div> 
</div> 

<div id="div4"> 
    <div id="div4Text"></div> 
</div> 

CSS：

#div1, #div1Text, #div2, #div2Text, #div3, #div3Text, #div4, #div4Text, #pieChart { 
    /* Centering */ 
    margin-left: auto; 
    margin-right: auto; 
} 

#div1, #div2, #div3, #div4 { 
    width: 428px; 
    height: 59px; 
    background-size: 428px 74px; 
    padding-top: 15px; 
} 

#div2, #div3, #div4, #pieChart { 
    margin-top: 40px; 
} 

#div1 { 
    background-image: 
     url(../ScreenImages/iPad@2x/common/BTN.png); 
    margin-top: 240px; 
} 

#div1Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text1.png); 
    width: 336px; 
    height: 28px; 
    background-size: 336px 28px; 
} 

#div2 { 
    background-image: 
     url(../ScreenImages/iPad@2x/common/BTN.png); 
} 

#div2Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text2.png); 
    width: 231px; 
    height: 28px; 
    background-size: 231px 28px; 
} 

#pieChart { 
    background-image: url(../ScreenImages/iPad@2x/home/Progress-Wheel.png); 
    width: 288px; 
    height: 288px; 
    background-size: 288px 288px; 
} 

#div3 { 
    background-image: 
     url(../ScreenImages/iPad/victor/BTN.png); 
} 

#div3Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text3.png); 
    width: 176px; 
    height: 28px; 
    background-size: 176px 28px; 
} 

#div4 { 
    background-image: 
     url(../ScreenImages/iPad/victor/BTN.png); 
} 

#div4Text { 
    background-image: url(../ScreenImages/iPad@2x/home/Text4.png); 
    width: 211px; 
    height: 28px; 
    background-size: 211px 28px; 
} 

NB：所述#divX的高度是59而不是74，因爲padding-top屬性被添加到的高度（59 + 15 = 74）。

NB2：我不確定background-size屬性是否真的有用。