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 背景に並べるだけです。丸みを帯びた角が適切に調整されます。

これにアプローチできる方法は他にもたくさんあります。たとえば、ラッパーに完全な背景を配置し、コーナーの画像を 2 つの外側の 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 に答える