Question

我有一个在Visual Studio中使用母版页的ASP.NET网站内容页面水平显示图像，但我希望它们是垂直的，就像在列中一样。

<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

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

#Content2 {
    width: 400px;
}

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

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

尝试此操作可以帮助您将图像置于垂直状态。

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>

如何垂直显示图像

4 个答案: