c# - 如何在面板中并排设置控件
问题描述
我有这样的事情:
但我需要像这样设置控件:
我的 Panel.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Panel ID="pnlProducts" runat="server"></asp:Panel>
<div style="clear: both"></div>
</asp:Content>
我的 Panel.aspx.cs
foreach (DataRow row in dt.Rows)
{
int id = row;
byte[] bytes = (byte[])row["image"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
Panel productPanel = new Panel();
ImageButton imageButton = new ImageButton
{
ImageUrl = "data:image/png;base64," + base64String,
CssClass = "productImage",
PostBackUrl = string.Format("Product1.aspx?id={0}", row)
};
Label lblName = new Label
{
Text = row["nazwa"].ToString(),
CssClass = "productName"
};
Label lblPrice = new Label
{
Text = row["cena"].ToString() + " zl",
CssClass = "productPrice"
};
productPanel.Controls.Add(imageButton);
productPanel.Controls.Add(new Literal { Text = "<br/>" });
productPanel.Controls.Add(lblName);
productPanel.Controls.Add(new Literal { Text = "<br/>" });
productPanel.Controls.Add(lblPrice);
pnlProducts.Controls.Add(productPanel);
}
}
我的 CSS 代码
/*Webshop */
#ContentPlaceHolder1_pnlProducts div {
float: left;
width: 250px;
height: 250px;
text-align: center;
}
.productName {
font-weight: bold;
font-size: 18px;
}
.productPrice {
font-family: arial,helvetica,sans-serif;
color: #FFB600;
}
.productImage {
width: 150px;
height: 150px;
vertical-align: central;
padding: 10px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
我不知道我必须在哪里使用 float:Left 或类似的东西如何在面板中并排设置控件。
解决方案
你应该使用 Flex-box 这很容易
在你的父母:
display: flex;
flex-wrap: wrap;
在孩子身上:
flex: 1 1 20%;