如何讓div具有相同的內容寬度和高度？

11

浮動股利將使拆封等股利只會有空間裏面的內容。

您可能需要使用clear以後的元素。

另一種方法是使用inline-block。

來源

2010-09-15 00:08:52

+0

@Marko - Huh？我忘了什麼嗎？ – 2010-09-15 00:13:35

+0

+1錯誤的問題，認爲他試圖讓一個孩子填補父母。要刪除那個評論，在這個之後不久:) haha – Marko 2010-09-15 00:15:04

+0

在大多數瀏覽器中都可以進行內聯塊處理嗎？因爲我一直不確定這件事，所以我從未真正使用它。 – WalterJ89 2010-09-15 00:30:40

2

試試這個CSS：

div { 
    display: inline; 
}

來源

2010-09-15 00:08:42

4

行內塊是正確的。

<div style="border:1px solid red;display:inline-block"> 
    <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" style="border:1px solid green" /> 
</div>

來源

2010-09-15 00:15:31 Sammy

+1

我認爲內聯塊的瀏覽器支持有限（即我認爲它幾乎侷限於IE），但我只是在Safari（webkit）*和* Firefox上測試了你的例子，它就像一個魅力。 ......多年來一直這樣做 - 每天學習新東西。謝謝薩米！ – Lee 2010-09-15 00:32:55

+0

@你說得對。我只是在IE6,7和8中測試它，並且寬度不受三種內部圖像大小的限制。哦，從來沒有真的覺得有必要自己使用這個。 – Sammy 2010-09-15 00:42:28

4

默認情況下，div將具有相同的高度 - 除非您以某種方式限制它，或者添加填充或邊距。但是默認寬度將填充可用空間。如果要將寬度摺疊爲「收縮包裝」內容，則必須將其浮動，或使其完全定位。

這個問題（取決於您的需求）是，這兩個有效地把它從正常的佈局。如果你需要它仍然是正常佈局的一部分，你必須做這樣的事情（邊界都包含這樣你就可以告訴這是怎麼回事）：

<html> 
<head> 
<title>pdf test</title> 
    <style type="text/css"> 
     #a { 
      position:relative; 
      border: 1px solid green; 
     } 
     #b { 
      float: left; 
      border: 1px solid red; 
     } 
    </style> 
</head> 
<body> 

    <div>Top</div> 
    <div id="a"> 
     <div id="b"> 
      asdf<br/> 
      typewriter</br> 
      fdsa 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
    <div> 
     Bottom 
    </div> 

</body> 
</html>

的外層div #a作品像正常的div。這裏的重要部分是#a是position: relative。這建立了一個定位上下文，其中#b將浮動。這種「雙重包裝」的方法將讓div仍然能夠像「普通」div一樣在佈局中工作，同時允許你通過Javascript從#b「嗅探」寬度/高度，如果你需要的話。

所以......這取決於你的需求是什麼 - 但這應該讓你在正確的方向。

祝你好運！

來源

2010-09-15 00:27:27 Lee

+0

我在這裏寫的所有東西都是真的 - 它會起作用 - 但@Sammy的答案可能是要走的路。 – Lee 2010-09-15 00:34:15

+0

我不明白'position：relative'在這裏是如何相關的，你可以清除float，這就是所有必要的。如果它是絕對的而不是浮動的，那麼你就需要它。 – 2010-09-15 01:11:43

+0

@meder - 你是對的。在這種情況下，除非'div：b'使用'position：absolute'而不是'float：left'，否則外部div是不必要的。 – Lee 2010-09-15 03:04:25

2

對於任何默認塊級元素（如div，h1-h〜等），IE不支持內嵌塊。

行內塊行爲是自動調整寬度和高度的大小，同時允許位置，邊距和填充等內容。因此，所有你真正需要做的是使用

<span style="display: inline-block"> 
</span>

，然後你將有一些瀏覽器兼容的代碼:)

享受。

來源

2010-09-15 01:36:14 Jason

如何讓div具有相同的內容寬度和高度？

回答

相關問題