使用div縮放圖像，其子設置高度

div本身就是其內容的高度。使用div縮放圖像，其子設置高度

我想要一個div包含兩個孩子：另一個div（或左對齊的圖像）和無序列表（ul）。內部div（或圖像）將匹配父div的高度，父div高度將符合列表的高度（可以包含任何合理數量的項目）。

我不確定如何設置父div的高度以匹配列表的高度，並讓inner div匹配外部div的高度。通過CSS正確完成。

備用解決方案很高興地接受，這只是我試圖解決我的設計目標的一種方法。

來源

2011-03-07 Sarabjot

Live Demo

在IE7/IE8測試，並將最新版本：火狐，Chrome，Safari瀏覽器，歌劇。
圖像的高度完全取決於ul的高度。
要提供IE7所需的額外規則height: 100%，我正在使用Star hack。如果您需要100％有效的CSS，則可以使用conditional comments或Star plus hack。

CSS：

#iContainer { 
    background: #ccc; 
    overflow: hidden; 
    position: relative 
} 
#iContainer div { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    *height: 100% /* just for you, IE7 */ 
} 
#iContainer img { 
    height: 100% 
} 
#iContainer ul { 
    float: right 
}

HTML：

<div id="iContainer"> 

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div> 

    <ul> 
     <li>list 1</li> 
     <li>list 2</li> 
     <li>list 3</li> 
     <li>list 4</li> 
     <li>list 5</li> 
     <li>list 6</li> 
     <li>list 7</li> 
     <li>list 8</li> 
    </ul> 

</div>

大紅色圖片：

來源

2011-03-07 21:53:06 thirtydot

OP - 選擇這個在我的更好 – 2011-03-07 22:15:08

@Sarabjot：讓我知道如果你遇到任何問題，這不是我以前試過的東西。我有興趣聽到任何警告（當你在真實網站上使用它）。 – thirtydot 2011-03-07 22:26:32

非常感謝！我認爲這是沿着這些線條，優雅的解決方案。它被用於數學網站來表示線性系統。左圖像實際上是一個開放的大括號。 – Sarabjot 2011-03-07 22:32:14

這是做你以後的事情嗎？

http://jsfiddle.net/Mutant_Tractor/CQG8s/

它使用一個小的（純JS）腳本來衡量頁面加載列表高度，然後通過.style.height方法:)

來源

2011-03-07 20:46:58

太棒了，謝謝！不幸的是JS不是一種選擇。如果我向老闆提出這個問題，他會告訴我用表格來解決這個問題。我試圖限制我對CSS和HTML的回答，但我可以看到哪裏可能無法實現。 – Sarabjot 2011-03-07 20:50:10

你可以試試人造色譜柱嗎？ http://www.alistapart.com/articles/fauxcolumns/ – 2011-03-07 20:52:28

包含div的圖像是不重複的，只是縮放到列表的高度。 – Sarabjot 2011-03-07 20:54:13

如果你想有一個div來匹配動態設置div的高度其容器高度，將其高度設置爲100％。如果您希望div使用盡可能多的空間，請將其高度設置爲auto（默認）。

所以，它聽起來像你要找的佈局

<style type="text/css"> 
.scaledimage{height:100%;float:left} 
.list{float:left;} 
</style> 
<div class="container"> 
    <div class="scaledimage"></div> 
    <div class="list"></div> 
<div>

來源

2011-03-07 20:54:02 Tony

使用div縮放圖像，其子設置高度

回答

相關問題