如何在面板中并排设置控件

Question

我有这样的事情：

但我需要像这样将控件设置为彼此相邻：

我的 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 或类似的东西如何在面板中并排设置控件。

Answer 1

你应该使用 Flex-box 这很容易

在你的父母身上：

display: flex;
flex-wrap: wrap;

关于孩子：

flex: 1 1 20%;