0

如您所见，我有一个主 div (id="main_div")，其中包含 2 个 div id="logo" div，其中包含指向图片 id = "intro" 的链接，其中仅包含文本

http://jsfiddle.net/omerbach/y7n2b/

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

我有几个问题： 使用 inline 时，图片不在其周围的 div 中（可以看到黑色边框） 当使用 inline-block 时，图片在其周围的 div 中（可以看到黑色边框）

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

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

谢谢

4

1 回答 1

0

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit
, sed

这是内联块无法做到的。现在高度是多少？两条线？和宽度？消极的？它的终点在起点的左侧！

换句话说，你真的无法分辨。浏览器也不能。因此，如果其中有一个大元素，例如您的示例中的 img，则内联 div 不会增长到包含整个 img；img 只会溢出它。

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

于 2013-06-27T10:22:35.750 回答