如何製作一個足夠大的盒子用於某個元素？

考慮一個文件是這樣的：如何製作一個足夠大的盒子用於某個元素？

<DOCTYPE html> 
<html><head><title>test</title></head> 
<body> 
<div> 
<img src="..." alt="" style="clear:both" /> 
<p>Lorem ipsum...</p> 
</body></html>

的圖像（在我的情況下，它實際上是一個嵌入SVG生成的ad-hoc）有事先不知道大小。封閉div如何具有足夠大的寬度以容納圖像（即，使得下面的段落以與上面的圖像相同的寬度斷開）？

這是this question的後續行動。我目前正在使用的代碼可以在here找到。董事會上方的文字應該與董事會的寬度相同。

來源

2013-02-17 fuz

這可以通過使用display:table和一組最小寬度來實現。我在下面的示例中使用了width:1px，但任何最小寬度都可以使用。

HTML：

<div> 
    <img src="..." alt="" /> 
    <p>Lorem ipsum...</p> 
</div>

CSS：

div { 
    width: 1px; 
    display: table; 
}

結果會是這個樣子：

enter image description here

JS Fiddle Example

來源

2013-02-17 19:12:20 JSW189

顯示：表格是訣竅。 – fuz 2013-02-17 20:20:41

您可以使用浮動，以適應集裝箱

<div style="float:left;background:yellow;"> 
    <img ...> 
    <p>...</p> 
</div>

，或者你可以嘗試（不與IE7工作...但你也許可以修復它）

<div style="display:inline;display:inline-block;background:yellow;"> 
    <img ...> 
    <p>...</p> 
</div>

和新的Mozilla和WebKit瀏覽器有

<div style="width:fit-content;margin:0 auto;background:yellow;"> 
    <img ...> 
    <p>...</p> 
</div>

我不知道將與您的SVG發生什麼，但在<svg> DECL aration您可以指定矢量AFAIK

希望能對大家有所幫助的實際呈現大小..

來源

2013-02-17 19:09:14

我居然s ^稍後再使用特定的javascript。如果我只需要在一個地方改變寬度就好了。 – fuz 2013-02-17 20:06:09

如何製作一個足夠大的盒子用於某個元素？

回答

相關問題