Как отображать изображения по вертикали

Question

У меня есть страница содержимого веб-сайта ASP.NET, которая использует главную страницу в Visual Studio.
Изображения отображаются горизонтально, но я хочу, чтобы они были вертикальными, как в столбце.

<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

Я расположил их в 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>

Answer 2

Они отображаются горизонтально, потому что изображение является встроенным элементом по умолчанию. Вы можете установить ширину #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

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