display:内联重置高度和宽度

N30*_*N30 22 css

我在http://jsfiddle.net/GKnkW/2/创建了示例

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
 </head>
<body>
      <div class="step">1</div>&nbsp;
      <div class="step">2</div>
      <br/><br/>
      <div class="step1">3</div>&nbsp;
      <div class="step1">4</div>
</body>
</html> 
Run Code Online (Sandbox Code Playgroud)

CSS

.step
{
    height:150px;
    width:150px;    
    background:yellow;
    display:inline;
}

.step1
{
    height:150px;
    width:150px;    
    background:yellow;
}
Run Code Online (Sandbox Code Playgroud)

我希望在添加显示时立即显示两个div与它们的原始高度和宽度(在css中设置):内联属性到css它似乎松散了之前定义的高度和宽度.[检查#1和#2的div似乎松散的高度和宽度设置]

可能有一个引脚指出一个错误,我似乎正在做或解决这个奇怪的行为?

DA.*_*DA. 42

内联对象没有高度或宽度.为什么要将它们设置为内联?您可能想要浮动它们或使用内联块.


小智 12

用这个:

display:inline-block;
Run Code Online (Sandbox Code Playgroud)

  • 请修改您的答案,并说明其工作原理。 (2认同)