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

I did that before, and only saw the first image. The rest of the images were replaced by arrows pointing to the right in Design mode. — Grafica, Dec 07 '13 at 08:14

score 0 · Answer 1 · answered Dec 07 '13 at 08:14

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
}

score 0 · Answer 2 · answered Dec 07 '13 at 08:29

0

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

answered Dec 07 '13 at 08:29

Bipin Kumar Pal

1,009
2
8
16

It doesn't display properly. Maybe because of the Razor tags? http://jsfiddle.net/QntF6/ – Grafica Dec 07 '13 at 08:39

score 0 · Answer 3 · answered Dec 07 '13 at 08:50

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.

score -1 · Accepted Answer · answered Mar 04 '14 at 04:03

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>

How to display images vertically

4 Answers4