Question

我没有应用任何样式的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/>元素，我只是想知道为什么这些元素会变得越来越多垂直对齐而不是水平对齐？

Answer 1

这是标头标签的性质，它们默认为display: block。您可以使用

进行更改

h2 { 
  display: inline; 
}

查看分叉小提琴：http://jsfiddle.net/c3UCs/

Answer 2

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

显示在同一行：

使用css属性：diplay:inline;

Answer 3

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

Answer 4

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

要使用标题内嵌显示图片，请执行以下操作：

h2{
    display:inline;
}

没有应用样式或br元素。为什么它垂直对齐

4 个答案: