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

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

Answer 2

它们是水平显示的，因为默认情况下 image 是一个内联元素。您可以将宽度设置为#Content2，并将图像的宽度设置为 100%。像这样的东西：

#Content2 {
    width: 400px;
}

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

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

试试这将帮助您将图像垂直放置。

Answer 4

我将它们排列在 GridView 中。图像是从“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>