Question

创建了示例

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中设置）一旦我添加显示：内联属性到css它似乎松散高度和宽度定义在前面。 [检查＃1和＃2的div，似乎松散的高度和宽度设置]

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

Answer 1

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

Answer 2

这应该这样做

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

Answer 3

只是添加我有类似的问题，并认为这是一个Javascript / Jquery问题。这个帖子为我解决了。

INLINE元素没有宽度，因此您无法通过js设置它。

感谢。

以下是我的问题的链接，以防万一。

Jquery and Jqueryui: set width not working after using resizable?

display：内联重置高度和宽度

3 个答案: