創建具有固定寬度和靈活高度的div

我想創建一個具有固定寬度和靈活高度的div，here是我想用於背景的圖片。事情是，當我有div大於圖像高度的底部圓角被省略，如果我有div小於圖像大小相同的東西，我該如何使這個工作與所有尺寸的圓角？謝謝創建具有固定寬度和靈活高度的div

2009-12-04 Gandalf StormCrow

只使用圖像的底部，其他人使用邊框樣式。

<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;"> 
     <div id="myContent" style="border: 1px solid #ccc; border-bottom:none;"> 
      Some Content 
     </div> 
    </div>

如果您需要在頂部有一個圓形邊框，只需添加樣式的「背景」，以#myContent與頂部對齊和其他圖像。

來源

2009-12-04 09:50:51 Coyod

這完全有效..謝謝 – 2009-12-04 10:14:23

不要忘了削減你的形象，只留下底部。不客氣。 – Coyod 2009-12-04 10:20:10

將背景圖像放置在底部 - 爲div的底部添加一些填充，以便角落適合該底部。使bg圖像真的很高。

來源

2009-12-04 09:23:19 matpol

「讓bg圖像真的很高。」 - 這種情況適用於低身高和大身材？ – 2009-12-04 09:29:10

而且.. divs是動態生成的，我怎麼知道每次使用哪個填充？ – 2009-12-04 09:31:14

是的，並添加一個類的div - 填充應該是相同的每一次 – matpol 2009-12-04 09:56:18

使用背景位置將確保你總是有圓角：

CSS：

background-position:bottom;

你必須創建一個有很多額外的高度的圖像，這樣，如果股利確實最終比預期的要高，你總是有空間玩。

另一種選擇是將div分成2個獨立的div - 1作爲主要內容部分，另一個只是將彎曲的角部添加到底部。這將允許您爲主div使用1px高背景圖像，併爲曲線邊框圖像使用20px（ish）圖像，從而大大減小文件大小。我附上了一個例子：Download Example

來源

2009-12-04 09:34:15 BenTheDesigner

創建具有固定寬度和靈活高度的div

回答

相關問題