我知道这是一个错误且令人困惑的标题，但我对这段代码感到困惑。我基本上是一名 UI 设计师，与一位非常优秀的开发人员密切合作，不幸的是，由于一些家庭问题，我的开发人员下周左右没有时间，我有一个非常紧迫的项目要完成。我是css的新手，所以这段代码真的很乱，我真的希望并祈祷你们能帮助我。
所以这就是问题所在，我正在设计一个响应式网站，桌面版已经准备好。在较小分辨率的版本中，我面临以下问题。本节
<div class="promo_container">
<div class="promo one"><div class="content"><h3>Dashboard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></div>
</div>
<div class="promo two"><div class="content"><h3>Accounts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></div>
</div>
<div class="promo three"><div class="content"><h3>Forecast</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></div>
</div>
</div>
有了这个用于桌面版的 css
.promo_container {
max-width: 980px;
position: relative;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
padding-top: 75px;
height: 350px;
display: block;
}
.promo.one {
background: url(../images/promo1.jpg);
background-repeat: no-repeat;
float: left;
background-position: 0px 3px;
width: 326px;
display: inline-block;
}
.promo.two { background: url(../images/promo2.jpg);
background-repeat: no-repeat;
float: left;
background-position: 0px 3px;
width: 326px;}
.promo.three { background: url(../images/promo3.jpg);
background-repeat: no-repeat;
float: left;
background-position: 0px 3px;
width: 326px;;
}
.promo_container .promo .content {
padding-top: 140px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 2em;
}
工作正常，但是当我使用这个 css 作为平板电脑分辨率时
@media only screen and (min-width: 550px) and (max-width: 800px){
.promo_container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding: 0px;
height: auto;
position:relative;
overflow: auto;
}
.promo.one { background: url(../images/promo1.jpg);
background-repeat: no-repeat;
float: none;
background-position: 0px 3px;
width:200px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
.promo.two { background: url(../images/promo2.jpg);
background-repeat: no-repeat;
clear: both;
background-position: 0px 3px;
width: auto;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;}
.promo.three { background: url(../images/promo3.jpg);
background-repeat: no-repeat;
float: none;
background-position: 0px 3px;
width: auto;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.promo_container .promo .content {
padding-top: 140px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
line-height: 2em;
}
}
结果是这些促销都堆叠在屏幕左侧虽然我希望它们位于页面的中心。（我希望可以附加图像，但我还没有在 stackoverflow 上的权限。）
现在第二个问题是，正如您所看到的，我已将 OVERFLOW 设置为自动，原因是这些促销来自下一个 div 的内容，即
<div class="testimonial">
<div class="testimonial-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br/><br/><b>-Lorem Consecteular</b></p></div>
</div>
使用 CSS
.testimonial {
width: 100%;
background-repeat: repeat-x;
height: auto;
background-color: #f4f4f4;
}
.testimonial .testimonial-content {
height: auto;
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.testimonial-content p {
padding-top: 10px;
}
他们没有相同的父 div，并且溢出设置为自动，促销带有他们自己的滚动条，所以你能指出我在哪里犯了错误。正如我所说，我的朋友们我是新手，所以也许我在这里犯了几个（或者更多:() 错误，但如果有人能帮助我，我将不胜感激。