CSS - 格寬度取決於圖像大小以上

<html><head> 
 
    <title></title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <style type="text/css"> 
 

 
    .box {background:gray;border:3px solid black;float:left;} 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    
 
<div class="box"> 
 
    <img src="http://i.stack.imgur.com/shWOu.jpg"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh, ullamcorper in suscipit non, scelerisque eget sem. </p> 
 
</div> 
 
</body></html>

正如你可以看到現在，與黑色邊框的盒子具有自動寬度調整到裏面的內容。問題是我希望盒子的大小適應內部圖像的寬度。因此，如果圖像的寬度與示例（紅色框）的寬度相同，則下面的文本應該停在藍點標記處，然後再往下走一條新線。

但是，我該怎麼做？

來源

2011-03-30 donpedroper

你現有的HTML和CSS是什麼？ – BoltClock 2011-03-30 10:54:48

你去那裏：http://pastehtml.com/view/1duy9p9.html – donpedroper 2011-03-30 11:03:40

你會從CMS或數據庫動態創建圖像/標題內容嗎？ – 2011-03-30 11:21:59

您的要求的問題是，如果格不具有特定寬度的文字不「知道」什麼時候打包，這就是爲什麼它使用了外部div的寬度...

所以...您需要爲outter div添加寬度，或者在使用圍繞圖像的div的情況下+文本，在該div中的寬度。

編輯：

在這裏你去： http://jsfiddle.net/jnmtu/

我做了一個測試（在我的例子是第三個）與表首先測試它，並刷新我的如何與工作心態表格，然後我將它應用於CSS方式。

工作原理：

你需要有一個周圍的div具有最小寬度（1％），並使其顯示爲一個表;那麼內部div（對應於「單元格」）應該有一個自動高度和隱藏溢出，這是需要「強制」它伸展div的寬度+高度（這是一個常見的技巧）。

注：我沒有在Internet Explorer中測試過，它可以與Firefox和Safari一起使用。

來源

2011-03-30 11:18:48 jackJoe

謝謝:)！儘管它的寬度很小（1％），但我仍然比jquery更喜歡這個解決方案... – donpedroper 2011-03-31 11:11:22

小小的黑客，我喜歡這個雙關鍵詞:)無論如何，CSS與表格相比有一些缺點，這是一種情況。我在大多數瀏覽器中試過，只有IE7（從不知道IE6）不會「喜歡」這個，它可能會使它工作，我認爲它可以解決另一個黑客。即使如此，知道它可以完成也是非常好的。 – jackJoe 2011-03-31 14:43:22

如果我理解正確的話，

如果圖像大小爲DIV（黑色邊框）相同，則文本會自動做你想做的。或者在div上嘗試overflow: none;。

但是，我個人不會這樣做。 Div是靈活的和可擴展的所以我會說在對方內使用2或3個div。

例如

<div id="black-border"> 

<div id="for-image"> 

<div id="the-image-itself"> 
<img src="image.jpg"/> 
</div> 

<div id="the-comment"> 
<p> This image is awesome</p> 
</div> 

</div> 

</div>

只是給圖像一個固定的大小，並輸入評論。您還可以設置

#the-image-itself, #the-comment{ 
display: block; 
}

如果你喜歡

希望這有助於:)

來源

2011-03-30 11:03:17 Kay

我認爲你誤會了我:)你見過我粘貼的HTML例子嗎？我希望描述文字與上面的圖像具有相同的寬度。不幸的是您的示例不適用於：（ – donpedroper 2011-03-30 11:18:31

@JackJoe說得好，你需要設置一個寬度來包裝div來匹配內部圖像的寬度。

這裏是做的一種方法：http://jsfiddle.net/audetwebdesign/bpN8x/

基本上，使用jQuery以確定圖像的寬度，然後設置包裝div的寬度。

或者，如果您要從CMS中提供圖像，則可以動態確定圖像的寬度，然後使用內聯樣式設置包裝div的寬度。

我不認爲只有CSS纔是可能的，因爲盒子模型決定了內容佈局時的寬度。寬度從父元素繼承，並不會從子元素傳遞。

來源

2011-03-30 11:38:02

Yearh，我知道jquery有一個「解決方法」，但我只是希望它可以用CSS修復。您的解決方案可以工作，但我會等着看是否還有CSS解決方案 - 希望沒關係; ） – donpedroper 2011-03-30 11:49:17

我也很好奇，這個html/css模式並不像我想的那麼明顯，所以看到其他答案會很有趣。感謝您的反饋。 – 2011-03-30 11:56:35

谷歌搜索拋出了這樣的事實，這個問題已經被問了萬次，並且目前仍無令人滿意的方式沒有寬度附着在容器

但是......

這個我想是由表元素最好處理的工作 - 表元素有一個caption元素，我會說這是工作的工具？

除了IE6/7的所有瀏覽器處理下面的代碼位好 - IE6/7處理它儘可能的寬度變，但它不支持CSS caption-side屬性，因此它不會把字幕圖像下面 - 這可能會或可能不會是一個問題 - 恕我直言，它仍然看起來相當（在這些幀;）），但情況因人而異，也許一個選擇，如果你真的不想腳本

<div class="content"> 
<table summary="image with caption"> 
<caption> 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
</caption> 
<tr> 
<td><img src="http://dummyimage.com/300x300/dad/fff" width="300" height="300" alt="This image is awesome"></td> 
</tr> 
</table> 
</div>

CSS寬度：

.content { 
    float: left; 
    padding: 20px; 
    border: 2px solid #000; 
} 

.content table { 
    border: 0; 
    border-collapse: collpase; 
} 

.content td { 
    padding: 0; 
} 

.content caption { 
    caption-side: bottom; 
}

來源

2011-03-30 15:08:54 clairesuzy

如果使用表格，它只需要1％的寬度，不需要標題標籤。檢查我的例子中的第三個項目。 – jackJoe 2011-03-30 16:13:42

是真的，那將工作太 - 但這樣的感覺多了很多「哈克」我 - 爲寬度的黑客，並在「標題」使用第二排的在技術上太考慮到表中的黑客已經做他們，但它肯定是一個選項，如果你真的想下面的IE7標題 - 我只是去了「_why使用黑客當** caption元素的正確使用**將DO_」的做法 - 這畢竟是它是什麼，不是嗎？ ;） – clairesuzy 2011-03-30 16:35:21

需要怎麼做才能是一個寬度attribu te就像Android佈局中的availabe，它被命名爲width：wrap-content。也許這對於CSS來說是一個很好的建議，因爲它在設計屏幕方面已經證明很方便。

來源

2012-12-04 14:42:29

FWIW我想出了一個最小的jQuery是這個

<div class="caption_wrap" style="float:right"> 
<img src="IMAG0332.jpg" onload="jQuery(this).parent().width(jQuery(this).width());"/><br /> 
this is some caption text, this is some caption text, this is some caption text, this is some  
caption text</div>

快。

來源

2012-12-05 15:18:31

CSS - 格寬度取決於圖像大小以上

回答

相關問題