How to display images vertically

Question

I have an ASP.NET Website Content Page that uses a Master Page, in Visual Studio.
There are images displayed horizontally, but I want them to be vertical, like in a column.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <p>
        <img alt="" class="auto-style2" src="Images/0cropped.jpg" id="0" />
        <img alt="" class="auto-style3" src="Images/1bCropped.jpg" id="1" />
        <img alt="" class="auto-style4" src="Images/2cropped.jpg" id="2" />
        <img alt="" class="auto-style5" src="Images/5cropped.jpg" id="5" /></p>
</asp:Content>

CSS:

img
{
float:left;
}  

Answer 1

I arranged them in a GridView. The images are populated from "ObjectDataSourceDoctor".

        </ItemTemplate>
        </asp:TemplateField>
        <asp:ButtonField AccessibleHeaderText="Save Rating" HeaderText="Save Rating" Text="Save" />
        <asp:CheckBoxField DataField="fave" HeaderText="Favorite" SortExpression="fave" InsertVisible="False" Visible="True" />
    </Columns>
</asp:GridView>

Answer 2

img
{
float:left;
display:inline-block;
}  

Answer 3

HTML:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
    <img alt="" class="auto-style2" src="Images/0cropped.jpg" id="0" />
    <img alt="" class="auto-style3" src="Images/1bCropped.jpg" id="1" />
    <img alt="" class="auto-style4" src="Images/2cropped.jpg" id="2" />
    <img alt="" class="auto-style5" src="Images/5cropped.jpg" id="5" />
    </div>
</asp:Content>

CSS:

#content2 div
{ 
    display:block; 
    width:100%; 
    height:auto;
}
#content2 div img
{ 
    display:block;
}

try this will help you to put your images in verticaly.

Answer 4

They are displayed horizontally because image is an inline element by default. You could set width to #Content2 and set width to images to 100%. Something like this:

#Content2 {
    width: 400px;
}

#Content2 img {
    display: block;
    width: 100%;
    margin-bottom: 10px; // If needed
}