Question

我正在使用文件后面的代码创建一个表格。穿上占位符。

//在Main.aspx上

MyControl control1 = (MyControl)Page.LoadControl("MyControl.ascx");
control1.ID = "ctl1";
MyControl control2 = (MyControl)Page.LoadControl("MyControl.ascx");
control2.ID = "ctl2";
MyControl control3 = (MyControl)Page.LoadControl("MyControl.ascx");
control3.ID = "ctl3";
MyControl control4 = (MyControl)Page.LoadControl("MyControl.ascx");
control4.ID = "ctl4";

Table table = new Table();

TableCell cell1 = new TableCell();
TableCell cell2 = new TableCell();
TableCell cell3 = new TableCell();
TableCell cell4 = new TableCell();
TableRow row1 = new TableRow();
table.Style.Add(HtmlTextWriterStyle.Position, "absolute");

cell1.Controls.Add(control1);
row1.Cells.Add(cell1);
cell1.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell2.Controls.Add(control2);
row1.Cells.Add(cell2);
cell2.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell3.Controls.Add(control3);
row1.Cells.Add(cell3);
cell3.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell4.Controls.Add(control4);
row1.Cells.Add(cell4);
cell4.Style.Add(HtmlTextWriterStyle.Position, "absolute");

table.Rows.Add(row1);
placeHolder1.Controls.Add(table);

//在MyControl.ascx上（我在这里放置控件;用javascript创建）

<table cellpadding="0" cellspacing="0" border="0" width="217px" 
    style="position:relative" >
<tr>
    <td >
    <div id="c1" class="gauge" style="margin:0;padding:0;height:169px;width:217px;">   
    </div>
    </td>
</tr>

//在用户控件的CSS中

div.gauge
{
    background-repeat: no-repeat;
    background-position: top center;
    height: 169px;
    margin: 0px;
    overflow: visible;
    position: absolute;
    width: 217px;
    z-index: 0;
}

但我看到只有第一个控件被加载，有些则没有。有什么遗失？

Answer 1

所有四个控件都存在，问题是绝对定位

无论是否在桌子内，所有四个都有相同的x和y定位;

删除绝对片刻，看看它们在页面中呈现

Answer 2

这是可怕的重复代码，在我继续阅读之前，让我们把它清理干净。

// Initializing parents at the top.
Table table = new Table();
table.Style.Add(HtmlTextWriterStyle.Position, "absolute");

TableRow row = new TableRow();

// For loop, you could turn this in a foreach to load controls based on an array.
for (int i = 1; i <= 4; ++i)
{
    MyControl control = (MyControl) Page.LoadControl("MyControl.ascx");
    control.ID = "ctl" + i.toString();

    TableCell cell = new TableCell();
    cell.Controls.Add(control);
    cell.Style.Add(HtmlTextWriterStyle.Position, "absolute");
    row.Cells.Add(cell)
}

table.Rows.Add(row);
placeHolder.Controls.Add(table);

阅读更清洁，更容易发现错误。然而，当你谈到没有看到四个按钮时，它不是发现错误的正确位置，所以你必须更仔细地检查HTML。使用适当的Web开发工具，您可以将元素悬停在DOM树中，您将看到它们位于彼此之上。

使用上面改进的代码，很容易抵消它们，只需使用i ......：）

div.gauge
{
    background-repeat: no-repeat;
    background-position: top center;
    height: 169px;
    margin: 0px;
    overflow: visible;
    position: absolute;
    width: 217px;
    z-index: 0;
}

你真的需要所有这些属性吗？

您指定position: absolute但实际上没有定位元素？ overflow: visible有意义吗？ z-index: 0有什么用，为什么要指定？

表格单元格定位问题

2 个答案: