Question

我正在使用以下布局。 enter image description here

所有元素都是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块

@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属性是否真的有用。

div宽度问题

1 个答案: