Question

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

如何在不重叠的情况下实现完美的响应缩放？就像是： .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>

问题是，左边和右边都有圆形图形，所有这些都必须很好地结合在一起。

Answer 1

你可以使用css display:table属性：

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

选中此http://jsfiddle.net/A34pt/

或

你也可以在没有display:table的情况下实现这一点。

检查一下 http://jsfiddle.net/A34pt/1/

Answer 2

here's a sample

<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;     
}

Answer 3

如果您正在运行jQuery UI并且只是尝试围绕div的底角，您可以这样做：

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

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

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

或者，您可以尝试here

所述的标准滑动门技术

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

Answer 4

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

Answer 5

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

Answer 6

你可以使用position：absolute到你的角落divs放置在左边和右边，并使用相同的背景颜色到角落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);
}

100％宽度图像

6 个答案:

HTML

CSS