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

Я хочу отображать два divs бок о бок с их первоначальной высотой и шириной (устанавливается в css) как только я добавлю отображение: встроенное свойство css, похоже, потеряло высоту и ширину, определенные ранее. [проверить divs С# 1 и # 2, которые, кажется, теряют настройку высоты и ширины]

может ли какой-нибудь один вывод указать ошибку, которую я, кажется, делаю или обходной для этого странного поведения?

Ответ 1

Внутренние объекты не имеют высот или ширины. Почему вы начинаете устанавливать их в линию? Вероятно, вы захотите либо поплавать, либо использовать встроенный блок.

Ответ 2

Используйте это:

display:inline-block;

Ответ 3

Это должно сделать это

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

Ответ 4

Просто добавив, что у меня была аналогичная проблема, и подумал, что это проблема Javascript/JQuery. Эта нить решена для меня.

Элементы INLINE не имеют ширины, поэтому вы не можете установить его через js.

Спасибо.

Здесь ссылка на мою проблему на всякий случай.

JQuery и Jqueryui: ширина набора не работает после изменения размера?