display:inline重设高度和宽度

| 我在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> 
的CSS
.step
{
    height:150px;
    width:150px;    
    background:yellow;
    display:inline;
}

.step1
{
    height:150px;
    width:150px;    
    background:yellow;
}
我想并排显示两个div及其原始高度和宽度(在CSS中设置) 一旦我将display:inline属性添加到CSS中,它似乎就会失去先前定义的高度和宽度。 [用#1和#2检查divs似乎松动了高度和宽度设置] 有人可以指出我似乎正在做的错误或此怪异行为的解决方法吗?     
已邀请:
内联对象没有高度或宽度。为什么要先将它们设置为内联?您可能想浮动它们或使用
display: inline-block
。     
用这个:
display:inline-block;
    
只是补充说,我有一个类似的问题,并认为这是一个Javascript / Jquery问题。这个线程为我解决了。 INLINE元素没有宽度,因此您无法通过js进行设置。 谢谢。 这是我的问题的链接,以防万一。 jQuery和Jqueryui:使用可调整大小后设置宽度不起作用?     
这应该做 html
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
 </head>
    <body>
      <div class=\"step-section\">
          <div class=\"step\">1</div>
          <div class=\"step\">2</div>
      </div>
      <div class=\"step-section\">
          <div class=\"step\">3</div>
          <div class=\"step\">4</div>
      </div>
</body>
</html> 
的CSS
.step
{
    margin:5px;
    height:150px;
    width:150px;    
    background: yellow;
    float:left;
}

.step-section
{
  clear:both;
}
    

要回复问题请先登录注册