如何創建一個div *而不是*展開以填充它的父項？

我有一個div圖像周圍包裹着，就像這樣：如何創建一個div *而不是*展開以填充它的父項？

<div class="containing-div"> 
     <div class="image-wrapper"> 
      <img src="image.jpg"> 
     </div> 
     <div class="unrelated-stuff"> 
      Blah blah blah. 
     </div> 
</div>

現在，我希望image-wrapper取圖像的大小，並沒有更多的。但它不;它反而填充到containing-div的高度。（見實際頁面在這裏：http://holyworlds.org/new_hw/wallpapers.php）

我的CSS是：

.image-wrapper{ 
    float: left; 
    box-shadow: inset 0px 4px 10px black; 
    background-image: url('image.jpg'); 
} 

.image-wrapper img{ 
    visibility: hidden; 
} 
.unrelated-stuff{ 
    float: left; 
}

現在，如果我沒有做一個DOCTYPE聲明的工作就好了。但是我所做的一切都失敗了。

如何使image-wrapper成爲圖像的大小，同時仍然使用<!doctype html>？

來源

2011-06-04 snostorm

你試過：

.image-wrapper { 
    display: inline; 
}

或者：

.image-wrapper { 
    display: inline-block; 
}

或者：

.image-wrapper { 
    float: left; 
}

來源

2011-06-04 18:47:22 Jits

是的，但他們都沒有工作。 – snostorm 2011-06-04 18:51:01

float在這裏並不是最好的選擇...... inline（-block）更合適。 – 2011-06-04 18:51:48

更正;所有這些工作。他們修復它的寬度，但由於某種原因，它不是高度。看看頁面，它有浮動：留在。 :) – snostorm 2011-06-04 19:07:19

CSS的應該是...

.image-wrapper 
{ 
    width: 0; 
    height: 0; 
}

image-wrapper將自動佔用圖像的寬度和高度，除非您爲image-wrapper設置overflow屬性。

來源

2011-06-04 18:48:43 bdparrish

不適用於我，至少不適用於Chrome。：P – snostorm 2011-06-04 19:12:44

@snostorm嘗試清除您的歷史記錄和緩存並查看它是否有效。你也可以嘗試賦予'.image-wrapper'類硬值。使它像'.image-wrapper {width：600;身高：200;}'我不知道這些值究竟應該是什麼，但這是一個alternet，但不是你可以嘗試的一種方法。它更容易讓它自動調整自己的大小以適應它應該使用的'.image-wrapper { width：0; 身高：0;} @bdparrish指出。 – Jem 2011-06-04 20:01:18

我一直掛在緩存的CSS上。 – bdparrish 2011-06-04 20:07:33

如何創建一個div 而不是展開以填充它的父項？

回答

如何創建一個div *而不是*展開以填充它的父項？

回答

相關問題

如何創建一個div 而不是展開以填充它的父項？