Question

如您所见，我有一个主div（id =“main_div”），其中包含2个div id =“logo”div包含图片的链接 id =“intro”，其中仅包含文字

 <div id="main_div">
      <div id="logo" class="headers">
        <a href="http://www.hawkaviation.com" target="_blank">
          <img src="http://www.badcomp.com/wp-content/uploads/2011/03/recommend-hawk.jpg"  alt="Hawk Aviation" />
       </a>
      </div>
      <div id = "intro" class="headers">
        PLACE YOUR ORDER NOW !!! 
      </div>
    </div>

内联块

http://jsfiddle.net/omerbach/NneB6/

body {
    background : white;
}
#main_div {
    background:gray;
    border : solid 3px red;    
}
.headers {
    border : solid 1px black;    
    display : inline-block;
}

我有几个问题：使用内联时，图片不在其周围的div中（你可以看到黑色边框）使用内联块时，图片位于其周围的div中（您可以看到黑色边框）

我认为内联块的目的是使元素内联，但保留其块功能，如设置宽度和高度，顶部和底部边距和填充等。我没有任何指定的那些我不明白为什么在我的情况下应该使用内联块。

同样关于这两个例子，为什么秒内部与第一个的底部对齐？是默认行为吗？

由于

Answer 1

答案是肯定的：inline-block元素仍然是一个块。块具有特定的高度和宽度，因此，当您在它们周围放置边框时，您就知道边框的大小。

另一方面，内联元素没有恒定的宽度或高度。拿这个strong

  Lorem ipsum dolor <strong> sit amet, consectetur adipisicing elit, sed</strong>

可能看起来像是一行高，但当屏幕足够窄时它可能会出现这样的情况：

Lorem ipsum dolor 坐下来，精神恍惚 elit，sed

内联块无法做到的。现在高度是多少？两条线？和宽度？负？它的结尾是它开始的左边！

换句话说，你无法真正说出来。浏览器也不行。因此，如果它中有一个大元素，就像你的例子中的img一样，内联div不会增长到包含整个img; img只会溢出它。

总结，是否使用块（内联或其他）或实际的内联元素取决于您的情况。知道差异是什么以及如何处理它们。

内联块与图片块

1 个答案: