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

Question

I have following html without any styles applied.

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

When I run this ( http://jsfiddle.net/zQKVu/ ), it shows me h2 text then its images vertically even though I haven't added any line break <br/> element and I am just wondering why these elements are getting aligned vertically and not horizontally?

Answer 1

That's the nature of header tags, they default to display: block . You can change it with

h2 { 
  display: inline; 
}

See the forked fiddle: http://jsfiddle.net/c3UCs/

Answer 2

Because div is not an inline element,it's a block same as H2 element.

to display in same line :

use css property: diplay:inline;

Answer 3

The default style for <h2> includes display: block; .

Answer 4

header are block elements so they take all of the space availble clearing all other elements.

To display the pictures inline with the headers use:

h2{
    display:inline;
}