如何在图像周围放置两个标签（动态）;右下角？

Question

我正在生成搜索结果的可视化列表，我想将其格式化为：

我不知道该怎么做。这是目前的样子

以下是我将这些结果放入

的网络表单的代码

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Search.</h2>
<div class="searchblock" id="searchdiv" runat="server">

    <asp:Button id="TestSearchButton" runat="server" Text="Search the Stuff" OnClick="TestSearchButton_Click" CssClass="btn-default" />

    <asp:TextBox ID="EnterBox" runat="server" Text="Hittin NM"/>

    <hr/>

    <div id="searchResults" runat="server">
    </div>
</div>

结果将放在'searchResults'div。

中

这是我用来生成这些结果块的代码

while (i <= allmantemp.Count - 1)
{
    Panel panel = new Panel();
    panel.CssClass = "ResultPanel";

    System.Web.UI.WebControls.Image img2 = new System.Web.UI.WebControls.Image();
    panel.Controls.Add(img2);
    img2.CssClass = "DisplayedImage";
    img2.ImageUrl = "Resources/allmanmushroom.jpg";

    Label numberBox = new Label();
    panel.Controls.Add(numberBox);
    numberBox.CssClass = "ItemNumberResult";
    numberBox.Text = "Item #:" + allmantemp[i].itemNum.ToString();

    Label titleBox = new Label();
    titleBox.CssClass = "ItemTitleResult";
    titleBox.Text = allmantemp[i].title;

    Label descriptionBox = new Label();
    descriptionBox.CssClass = "DescriptionResult";
    descriptionBox.Text = allmantemp[i].description;

    panel.Controls.Add(numberBox);
    panel.Controls.Add(new LiteralControl("<br />"));
    panel.Controls.Add(titleBox);
    panel.Controls.Add(new LiteralControl("<br />"));
    panel.Controls.Add(new LiteralControl("<br />"));
    panel.Controls.Add(descriptionBox);
    searchResults.Controls.Add(panel);

    i++;

}

以下是引用的CSS类

.DisplayedImage{
height: 180px;
width: 180px;
padding-top: initial;
margin-top: 6px;
margin-right: 6px;
margin-left: 6px;
float: left;
}

.ResultPanel{    
margin-left: 210px;
width: auto;
height: 200px;
display: block;
border: solid;
border-color: #DFECE6;
}

.ItemNumberResult{
background-color: #2D2D29;
color: #DFECE6;
margin-bottom: 50px;
margin-top: 10px; 
width: 180px;
}

.ItemTitleResult{
background-color: #2D2D29;
color: #DFECE6;
margin-bottom: 50px;
margin-top: 10px; 
width: 180px;
}

我知道我给出的代码将产生第二个结果;但我不知道如何使布局看起来像我想要的那样。

Answer 1

浮动和清算.ItemNumberResult应将其移至图片下方，让其他内容保持在右侧。

.ItemNumberResult{
    background-color: #2D2D29;
    color: #DFECE6;
    margin-bottom: 50px;
    margin-top: 10px; 
    width: 180px;
    float: left;
    clear: left;
}