CSS Floating Div с изображением VS Floating Div с Div, имеющим background-image

Question

Привет, у меня проблема с плавающим Div, которую я не могу понять.

Если я напишу div с помощью свойства float: left и тега Image, оба отобразятся в строке. например,

<div style="background-image:url(calendar_container_bg.gif);background-repeat:repeat-x;width:670px;height:253px;border:1px solid #8E9EAB">
            <div style="height:36px">
              <div style="float:left;color:#01389F;font:bold 14px Arial;padding-left:20px;line-height:36px;width:614px;">
                  Frühestes Anreisedatum.
              </div>
              <img src="calendar_close_btn.gif" style="padding-top:10px">
              <div style="clear:left"></div>
            </div>
          </div>

Но если я заменим тег изображения с помощью DIV, имеющего то же изображение, что и background-image, то оба DIV будут отображены на двух разных строках. Я не хочу использовать float: снова слева во втором DIV.

Answer 1

img - это встроенный элемент (например, текст или span), поэтому он идет на той же строке, что и любые другие встроенные элементы (которые перемещаются вправо, если вы перемещаете блочный элемент влево).

div - это блочный элемент, то есть каждый div получает свое вертикальное пространство. Единственный способ получить два div в одной строке:

1. плавают их
2. Сделай их display: inline