我的网站有问题。 当我缩放时，屏幕右侧有一个带有正文颜色的条带。我希望轮流有灰色和白色背景的部分。同样的事情是我使用iPad时。 我正在使用django。
<div class="white_tel" style="border-top: 1px solid #dddddd;">
<div class="center">
<div class="phones">
<img src="/static/img/tel/recipes/3tel.png" alt="Klaser" />
</div>
<div class="text_body"><span class="test_header">Saving Mom’s Recipes with Klaser</span></br><br>
My mom is an amazing cook. She’s taught me a lot in the kitchen over the years, but I really just don’t have her touch. She keeps her recipes on index cards in a box in the kitchen, but she hardly ever gives them more than a glance. If I’m going to make a meal taste as good as one of hers, I’m going to need a recipe.<br><br>
The thing is, I’m terribly disorganized. If something’s out of sight, it’s immediately out of mind. I’ve wanted to recreate my mom’s triple-layer chocolate cake for years, but I always forget to get the recipe from her when I’m visiting. I’ve asked her to email it to me before, but if we have anything in common, it’s our ability to forget a task the moment we turn away from it.</div>
</div>
<div class="center_bottom">
<div class="text_body_bottom">
<img src="static/img/recipes.jpg" align="right">
<p>I got the Klaser app to help organize my work schedule, but when I downloaded it, I had no idea how useful it would be in so many other capacities. I was visiting my parents last week, and when my mom pulled out her recipe box, it hit me. I could just snap a picture of her cake recipe – and any other recipes I might want – and save them for later.<br><br>
Now, ordinarily, I might just take a picture and forget about it, but, using Klaser, I was able to file my mom’s cake under my <span class="klaser_green">“Recipes”</span> folder and tag them <span class="klaser_green">#mom</span> and <span class="klaser_green">#cake</span>. Now I have my mom’s recipes right on hand any time I want to use them!</p>
<span class="person">~ Jenny Brown</span>
</div></div>
<div style="clear:both">
<a href="#page_text_scroll"><img class="subscribe_bottom" src="/static/img/button_top.png" alt="subscrube"/></a></div>
</div>
和css的样本：
.white_tel{
margin: 0 auto 0 auto;
background-color:#ffffff;
clear:both;
border-bottom: 1px solid #dddddd;
padding-top:30px;
padding-bottom:30px;
min-width:1280px;
}
.grey_tel{
margin: 0 auto 0 auto;
background-color:#f2f2f2;
clear:both;
border-bottom: 1px solid #dddddd;
padding-top:30px;
padding-bottom:30px;
min-width:1280px;
}
.test_header{
font-family: 'Open Sans', sans-serif;
font-size:25px;
color:@nice-blue;
margin-top:15px;
}
.text_body{
font-family: 'Open Sans', sans-serif;
font-size:15px;
color:#565656;
margin-top:40px;
margin-left:30px;
float:left;
width:450px;
text-align:justify;
}
.text_body_bottom{
font-family: 'Open Sans', sans-serif;
font-size:15px;
color:#565656;
margin-top:30px;
float:left;
text-align:justify;
}
.person{
float:right;
font-size:18px;
}
.text_body_bottom img{
width:450px;
margin:20px 0 20px 30px;
}
.subscribe_bottom{
margin:45px 0 30px 0;
cursor:pointer;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.subscribe_bottom:hover{
}
.subscribe_bottom_after{
margin-left:-2000px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.subscribe_bottom + .sub_input_bottom{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.sub_input_bottom {
width:300px;
height:36px;
padding:5px;
padding-left:10px;
color:#565656;
background: url('../img/input.png');
border:0px;
font-size:20px;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
position:absolute;
margin-left:-2000px;
margin-top:-93px;
}
.phones{
margin-top:35px;
float:left
}
.center_top{
width:1280px;
margin:auto;
}
.center{
width:1000px;
margin:auto;
height:390px;
}
.center_bottom{
width:1000px;
margin:auto;
}
.phones img{
height:350px;
}
Link to the photo 你知道该怎么做吗？