絕對div中100％div，沒有寬度和固定高度

我需要一個絕對定位的div，幷包含兩個子div：一個文本位於頂部，另一個底部爲背景色。像這樣：絕對div中100％div，沒有寬度和固定高度

<div class="test1"> 
    <div class="caption">Text that determines width of parent.</div> 
    <div class="bg"></div> 
</div>

我知道我可以只設置背景顏色上.test1，但我需要這樣的背景下是一個單獨的div來給我向後兼容（IE 7+）控制的位置，不透明度，寬度等使用jQuery。

使用以下CSS，除了文本位於.bg div之外，我可以使所有內容都可以工作。我需要頂部的文字。

<style type="text/css"> 
.test1 { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
} 
.test1 .caption { 
    float: left; 
    white-space: nowrap; 
} 
.test1 .bg { 
    height: 50px; 
    background-color: #222; 
} 
</style>

我怎麼能有.test1的寬度是基於文本的寬度，並有.bg格是100％的寬度和.caption底下？我應該重申，這需要在IE 7及更高版本中運行。

這裏有一個小提琴：http://jsfiddle.net/kbp6r/

來源

2013-03-30 Gavin

對於定位的問題，你必須依靠z-index魔術;）是適用於具有非靜態的位置元素（默認爲position: static）。因此，您是否考慮絕對定位.bg元素，並相對定位.caption元素？

.test1 .caption { 
    position: relative; 
    white-space: nowrap; 
    z-index: 2; /* More than .bg so it will be above */ 
} 
.test1 .bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; /* Less than .caption so it will be stacked underneath */ 
}

爲了迫使.bg元素是相同尺寸爲.caption，您可以用骯髒的定位絕招 - 當一個絕對定位的元素具有以下屬性聲明：

top: 0; 
left: 0; 
bottom: 0; 
right: 0;

它將填充到父容器的大小 - 在這種情況下，父容器的大小由.caption中的內容決定，因爲您已使用它的相對位置（根據我的建議）。

這裏是一個小提琴，顯示它是如何工作：http://jsfiddle.net/teddyrised/kbp6r/2/

來源

2013-03-30 10:03:17 Terry

謝謝！很棒。 – Gavin

@Gavin我很高興它幫助:) – Terry

更改HTML像下面。

<div class="test1"> 
    <div class="bg"> 
     <div class="caption">Text that determines width of parent.</div> 
    </div> 
</div>

來源

2013-03-30 10:12:50 Nilesh

這解決了我問的問題，但是我需要獨立的背景，因爲我將添加效果，並且我不希望文字受到影響。 – Gavin

絕對div中100％div，沒有寬度和固定高度

回答

相關問題