如何让div具有相同的内容宽度和高度？

答

浮动股利将使拆封等股利只会有空间里面的内容。

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

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

+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

答

试试这个CSS：

div { 
    display: inline; 
}

答

行内块是正确的。

<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>

+1

我认为内联块的浏览器支持有限（即我认为它几乎局限于IE），但我只是在Safari（webkit）*和* Firefox上测试了你的例子，它就像一个魅力。 ......多年来一直这样做 - 每天学习新东西。谢谢萨米！ – Lee 2010-09-15 00:32:55

+0

@你说得对。我只是在IE6,7和8中测试它，并且宽度不受三种内部图像大小的限制。哦，从来没有真的觉得有必要自己使用这个。 – Sammy 2010-09-15 00:42:28

答

默认情况下，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“嗅探”宽度/高度，如果你需要的话。

所以......这取决于你的需求是什么 - 但这应该让你在正确的方向。

祝你好运！

+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

答

对于任何默认块级元素（如div，h1-h〜等），IE不支持内嵌块。

行内块行为是自动调整宽度和高度的大小，同时允许位置，边距和填充等内容。因此，所有你真正需要做的是使用

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

，然后你将有一些浏览器兼容的代码:)

享受。

如何让div具有相同的内容宽度和高度？

相关推荐