3

我有一个页脚，其中有一个圆形的左图像，然后是中间的重复，最后是圆形的右图像。

如何在不重叠的情况下实现完美的响应式缩放？类似于： .paperBottom.middle {float:left; width: (100% -40px)}（40px 是右图的宽度）

设置：

<div class="paperBottomWrapper"> 
   <div class="paperBottom left"> </div>
   <div class="paperBottom middle"> </div>
   <div class="paperBottom right"> </div>
</div>

问题是，左边和右边有圆形图形，它们必须很好地结合在一起。

4

6 回答 6

3

display:table您可以为此使用 css属性：

.paperBottomWrapper{
 width:100%;
 display:table;
}
.paperBottom{
 display:table-cell;
}

检查这个http://jsfiddle.net/A34pt/

或者

你也可以做到这一点display:table。

检查这个 http://jsfiddle.net/A34pt/1/

于 2012-04-13T06:01:04.737 回答
1

这是一个样本

<div class="paperBottomWrapper"> 
   <div class="paperBottom left"> </div>
   <div class="paperBottom right"> </div>
   <div class="paperBottom middle"> </div>
</div>​

/*the containing div*/
.paperBottomWrapper {
    overflow:hidden;
    zoom:1;        
}

/*putting height so we can see it in action*/
.paperBottomWrapper > * {
    height:50px;
}

/*middle repeating area*/
.middle{
    overflow:hidden;
    zoom:1;
    background:green;  
}

/*the edges*/
.left{
    float:left;
    background:red;  
    width:50px;    
}

.right{
    float:right;
    background:red;   
    width:50px;     
}
于 2012-04-13T06:04:36.423 回答
0

如果您碰巧正在运行 jQuery UI，并且只是想将 div 的底角变圆，您可以简单地这样做：

<div class="paperBottomWrapper ui-corner-bottom" style="width:100%"> 
  Stuff  
</div>

要使用 jQuery 方法获得您正在寻找的背景效果，只需将您的背景图像平铺在 paperBottomWrapper 背景中。圆角将适当调整。

还有很多其他方法可以解决这个问题。例如，将完整的背景放在包装器上，然后将角图像放入两个外部 div 并适当浮动它们。

或者，您可以尝试此处描述的标准滑动门技术

还有其他几个 javascript 圆角应用程序。

于 2012-04-13T06:04:24.693 回答
0

在所有 3 个类中使用属​​性 float:left 并指定左右 div 的特定宽度，然后通过减去左右 div 宽度之和来指定中间 div 的宽度。3 个 div 的宽度之和必须与您的包装器宽度相同

于 2012-04-13T06:05:22.580 回答
0

HTML

<div class="paperBottomWrapper"> 
   <div class="paperBottom left">Left </div>
   <div class="paperBottom middle">Middle</div>
   <div class="paperBottom right"> Right</div>
</div>​

CSS

paperBottomWrapper { width:100%; }
.paperBottom { float:left; padding:1px }
.left { width :33%;background-color:red; }
.middle{ width :33%;background-color:green; }
.right { width :33%;background-color:blue; }

看DEMO

于 2012-04-13T06:05:39.623 回答
0

您可以使用 position: absolute 到您的角落 div 放置在左侧和右侧，并使用与页面背景相同的背景颜色与角落 div 相同。当然，这仅在您仅使用颜色作为主要背景颜色时才有效。

如果背景颜色：#333

.paperBottomWrapper{
position: relative;
}

.paperBottom.left{
position: absolute;
left: 0;
top: 0;
background: #333 url(YOUR_IMAGE);
}

.paperBottom.right{
position: absolute;
right: 0;
top: 0;
background: #333 url(YOUR_IMAGE);
}

.paperBottom.middle{
width: 100%;
background: url(YOUR_IMAGE);
}
于 2012-04-13T06:08:43.593 回答