android - div宽度的问题

Question

我正在使用以下布局。

所有元素都是带有背景图像和文本图像的 div。布局在 Kindle Fire HD(800 X 1280 像素)上有问题。底部的两个按钮从左侧缩短了，尽管下面两个 div 使用的所有参数与上面两个 div 的参数相同。

我希望所有 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>

Kindle Fire HD 的 CSS block

@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;
}

注意:#divX 的高度是 59 而不是 74，因为 padding-top 属性添加到高度 (59+15=74)。

NB2:我不确定 background-size 属性是否真的有用。