0

我有以下 html 没有应用任何样式。

<div>
    <div>
        <h2>Image1 Description</h2>
        <img src="\images\Image1.jpg">
    </div>
    <div>
        <h2>Image2 Description</h2>
        <img src="\images\Image2.jpg">
    </div>
    <div>
        <h2>Image3 Description</h2>
        <img src="\images\Image3.jpg">
    </div>
    <div>
        <h2>Image4 Description</h2>
        <img src="\images\Image4.jpg">
    </div>
</div>

当我运行这个（http://jsfiddle.net/zQKVu/）时，它会垂直显示 h2 文本，然后显示它的图像，即使我没有添加任何换行<br/>元素，我只是想知道为什么这些元素会垂直对齐并且不是水平的？

4

4 回答 4

3

这就是标题标签的本质，它们默认为display: block. 你可以改变它

h2 { 
  display: inline; 
}

见分叉的小提琴：http: //jsfiddle.net/c3UCs/

于 2013-08-29T23:34:10.583 回答
1

因为div不是内联元素，所以它是一个与H2元素相同的块。

在同一行显示：

使用 CSS 属性：diplay:inline;

于 2013-08-29T23:33:39.643 回答
1

<h2>包含的默认样式display: block;。

于 2013-08-29T23:34:28.913 回答
0

标头是块元素，因此它们占用了所有可用空间，清除了所有其他元素。

要显示与标题内联的图片，请使用：

h2{
    display:inline;
}
于 2013-08-29T23:34:37.710 回答