Question

你好我有浮动Div问题，我无法理解。

如果我用float：left属性和Image标签写一个div，两者都显示在一行中。例如

<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补充图像标签时，两个DIV将显示在2个不同的行上。我不想在第二个DIV中使用float：left。

Answer 1

img是一个内联元素（如文本或span），因此它与任何其他内联元素位于同一行（如果将块元素向左浮动，则向右移动）。

div是一个块元素，即每个div都有自己的垂直空间。在一行中获得两个div的唯一方法是：

漂浮他们
让他们display: inline

CSS浮动Div与图像VS浮动Div与Div具有背景图像

1 个答案: