如何用CSS實現這種佈局？

Question

我要實現的是這樣的：

• A）是一個正方形的圖像，比如65x65。
• B），該圖標是另一個圖像，其 需要內部A.
• C）到被浮置的行的最小長度是 A的高度最大值取決於文本 描述的長度的 。

通常當我已經浮如A和B的圖像，我願意把我的容器position爲relative，並obsolute爲浮動圖像，這將做到這一點，但我有點這裏的文字丟失。

這只是要在webkit瀏覽器上使用，如果這有什麼用處的話。

Answer 1

如果圖像大小是固定的，將來不太可能改變，那麼我建議將絕對位置應用於圖像（你在說什麼）。我猜你的問題是，如果文字太短，圖像的高度會超過容器的高度。這是最小高度輕易可以解決的：

.module { 
    min-height: 65px; /*your image height*/ 
} 

您可以查看這裏演示： http://jsfiddle.net/RkeJJ/

這應該工作一路下跌到IE7。

如果你的圖像大小是可變的，那麼我建議顯示：table/table-row/table-cell，但這隻適用於IE8 +和其他現代瀏覽器。

我是debcaña！;）

Answer 2

你知道圖像A的寬度（大圖像）。例如標題爲h1，文本爲p（或div），因此將這兩個元素設置爲的左邊距大於圖像A的寬度。

然後，您可以將圖像A浮動到左側，並使用絕對定位將圖標B定位在圖像上方。

最後，我將有一個包裝div與overflow: auto有一個邊框（如果需要），並允許底部邊距提供以下元素之間的空白區域。

部分答案：看到我的代碼段，http://jsfiddle.net/audetwebdesign/Nam52/

你只需要在標題後添加日期元素。