выпуск с шириной div

Question

Я использую вид следующей схемы.

Все элементы являются div с фоновым изображением и другим изображением для текста. Макет имеет вопрос на Kindle Fire HD (800 X 1280 px). Нижние две кнопки сокращаются с левой стороны, хотя все параметры, используемые для следующих двух div, такие же, как у двух вышеперечисленных div.

Я хочу, чтобы ширина всех разделителей была одинаковой. Любая помощь, пожалуйста ..

Соответствующий HTML код для дивы

<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. Это позволит вам сэкономить время на вычислении расстояния от верхнего и левого.

Если вы хотите, чтобы ваш ДИВ быть по центру, вы должны использовать это:

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> 

УС:

#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 действительно полезен.