Question

如何使灰线100％宽度（放大和缩小）？

注意：左侧和右侧div位置从屏幕右侧引起白色间隙问题。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style>
/* Start BG RECT */
.bg-rect {
    position: absolute; 
    top: 50px;
    left:0; right:0;    /* Required to be 100% 100% */
    min-width: 980px;   /* max for iPad */  
    height: 263px;
}

#bg-rect-important {
    overflow: hidden;   /* Disable right bg breaking by words on the right! */
    /* overflow hidden: disallows child be taller then parent?! */
    background-color: #656565;
}

/* Start BASE RECT */
.base-rect {
    position: relative; /* margin: auto works only with position: relative  */ 
    margin: 0 auto;     /* Centralize! */
/*!SPACE>*/top:32px; width:940px;
    /*left: -300px; /* unfortunately scroll doen't work */
}

#base-rect-lime {
    background-color: #3F3;
    height:249px;
}

    /* Start LIME RECT : left, right */
    #left-text {
        position:absolute;
        left:-200px; 
        width:200px; height:218px;
    }
    #right-text {
        position:absolute;
        right:-200px;
        width:200px; height:218px;
    }
    /* End LIME RECT : left, right */

/* End BASE RECT */
/* End BG RECT */
</style>

</head>

<body>

<div class="bg-rect" id="bg-rect-important">
    <div class="base-rect" id="base-rect-lime">
        <div id="left-text"></div>       
        <div id="right-text"></div>
    </div>
</div>

</body>
</html>

放大/缩小会破坏div的100％宽度。一个复杂的例子

0 个答案: