2012-06-23 37 views
16

在CSS中,我可以排列行内块的高度吗?在CSS中,我可以排列行内块的高度吗?

我认为通过将边距设置为0并将高度设置为自动,该块将扩展以适应可用空间,但仍然紧密地围绕该块。

.myclass { 
    display: inline-block; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
} 

http://jsfiddle.net/6NQDw/

我想两个框是相同的高度,但要在div宽度/高度,以通过它们的内容来确定,而不是指定在像素的宽度/高度。

是否有某种填充/边距/对齐CSS或类似的东西,我可以使用?

回答

23

如果你需要一个纯粹的CSS解决方案,你可以使用display:table-cell;,但要注意它不能在IE7中工作(我猜IE6现在已经被完全忘记了)。

.myclass { 
    display: table-cell; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
} 

Cross browser support for display:table-cell

实现你需要的是JavaScript的明确不过设置与动态内容的容器的宽度最好的方法是几乎总是错误的方式。

+7

无论如何,'inline-block'对IE7中的块元素不起作用,所以我猜IE7支持是不需要的。 – BoltClock

+0

那么确定我只是提出选项。 – brezanac

+1

表格单元格很吸引人(可以在表格外部使用吗?),但是有没有办法在.myclass块之间保留空格?当我切换到表格单元格时,它折叠了间距,并且添加边距似乎没有在边框线之间获得任何空间。 http://jsfiddle.net/6NQDw/18/ –

0

您可以使用display: table-cell;使箱子与彼此的高度相匹配。

0

如果您想要支持IE7,则不能使用内嵌块或表格单元格。

只需使用浮动:左是安全的......

否则你将土地利用起来只为IE7一个单独的CSS。

+0

我不认为浮子达到相等的高度。 http://jsfiddle.net/6NQDw/17/ –

+0

如果你知道在两个盒子里面会发生什么,那么你可以将“高度”添加到“myclass”中。但是,如果您希望盒子内的内容可能发生变化,那么这将是IE7中需要解决的问题。 – Geocrafter

-1

它很容易为lte ie8添加样式表,重置属性以显示:block,float:left,并使总宽度超出99%而不是100%。这将为您提供所有必需的功能。

+2

所以我们共享代码,你可以编辑你的答案,因此它的范围是原来的海报问题? – Anthony

相关问题