我有下面的CSS。我想要的是一种流体/液体(因为缺乏正确的术语)css。我正在为移动设备开发,当我将模式从纵向视图更改为陆地视图时,我希望它能够很好地流动。现在图片在
<div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div>
非常适合陆地视图,但在纵向视图中,它在分隔符图像之后留下了很多空间。如果我从 css 中取出 !important ,它就会开始切断图像。从昨天开始就一直在玩弄它。任何帮助将不胜感激
<style>
div.parentDivision {
margin-top:2px;
}
div.parentDivision div {
height:281px;
background-size: 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 480px) {
div.parentDivision div {
height:151px;
background-size: 100%;
background-repeat: no-repeat;
}
div.parentDivision-separator-middle {
height:151px ;
background-size: 100%;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 320px) {
div.parentDivision div {
height:151px !important;
background-size: 100%;
background-repeat: no-repeat;
}
div.parentDivision-separator-middle {
height:151px !important;
background-size: 100%;
background-repeat: no-repeat;
}
}
div.parentDivision-separator-middle {
height:165px !important;
background-size: 100%;
background-repeat: no-repeat;
}
div.parentDivision .childDivision1 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision2 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision3 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision4 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision5 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision6 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.parentDivision .childDivision7 {
background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
}
div.image {
margin: 1px;
}
div.parentDivision-separator-left {
float: left;
width: 49%;
overflow: hidden;
}
div.parentDivision-separator-right {
float: left;
width: 49%;
overflow: hidden;
margin-left: 2%;
}
div.parentDivision-separator-middle {
float: left;
width: 100%;
overflow: hidden;
}
div.parentDivision-separator div.image {
padding: 2px;
}
</style>
<div class="list-wrapper parentDivision">
<div class="parentDivision-separator-left"><div class="image childDivision1"></div></div>
<div class="parentDivision-separator-right"><div class="image childDivision2"></div></div>
</div>
<div class="list-wrapper parentDivision">
<div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div></div>
</div>
<div class="list-wrapper parentDivision">
<div class="parentDivision-separator-left"><div class="image childDivision3"></div></div>
<div class="parentDivision-separator-right"><div class="image childDivision4"></div></div></div>
</div>
<div class="list-wrapper parentDivision">
<div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div></div>
</div>
<div class="list-wrapper parentDivision">
<div class="parentDivision-separator-left"><div class="image childDivision5"></div></div>
<div class="parentDivision-separator-right"><div class="image childDivision6"></div></div>
</div>
这是jsfiddle
如果您将浏览器放大或缩小,您将看到图像被截断