Question

我的网络表单有3 <div>：左div为width: 300px，第二个div为width: 160px。第三个div没有设置宽度，因为它包含可以改变大小的网格视图。换句话说，gridview可以包含任意数量的列，每列的宽度必须为200px。

在此示例中，GridViewClicks有10列，每列宽200像素。我的屏幕是1366x768,460px（300px + 160px）已被两个div占用。剩余空间无法显示2000px gridview（10 cols x 200px）。所以它将第三个div移到了底部。即使将div移动到底部，它也会自动缩小柱子。如果我将columnNumber更改为 4 ，那么GridViewClicks就适合。

我需要在前两个div旁边显示GridViewClicks，并在gridview宽度大于可用空间时显示水平滚动条。每个gridview列各需要200px，不能调整列大小。

我的代码：

<form id="form1" runat="server">
<div>
    <div style="width: 300px; height: 300px; background-color: green; display:inline-block;"">
        <asp:Button ID="Button1" runat="server" Width="278px" Text="Button" />
    </div>
    <div style="width: 160px; height: 160px; background-color: blue; display:inline-block;">
        <asp:Button ID="Button2" runat="server" Width="140px" Text="Button" />
    </div>
    <div style="background-color: red; display: inline-block;vertical-align: top; overflow-x: auto;">
            <asp:GridView ID="GridViewClicks" runat="server" onrowdatabound="GridViewClicks_RowDataBound">
            </asp:GridView>
    </div>

</div>
</form>

代码隐藏：

public partial class ToErase : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable table = new DataTable();
        int columnNumber = 10;
        for (int i = 0; i < columnNumber; i++)
        {
            table.Columns.Add(i.ToString(), typeof(string));
        }

        DataRow row = table.NewRow();

        for (int i = 0; i < columnNumber; i++)
        {
            row[i.ToString()] = "item " + i.ToString();
        }
        table.Rows.Add(row);

        GridViewClicks.DataSource = table;
        GridViewClicks.DataBind();

    }
    protected void GridViewClicks_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataRowView drv = e.Row.DataItem as DataRowView;

            for (int i = 0; i < drv.Row.ItemArray.Length; i++)
            {
                    e.Row.Cells[i].Width = 200;
                    e.Row.Cells[i].Height = 80;
            }
        }
    }
}

Answer 1

通过将'max-width'属性添加到第三个div，可以防止它超过800px（适合的4列宽度）。

<form id="form1" runat="server">
  <div>
    <div style="width: 300px; height: 300px; background-color: green; display:inline-block;"">
      <asp:Button ID="Button1" runat="server" Width="278px" Text="Button" />
    </div>
    <div style="width: 160px; height: 160px; background-color: blue; display:inline-block;">
      <asp:Button ID="Button2" runat="server" Width="140px" Text="Button" />
    </div>
    <div style="background-color: red; max-width: 800px; display: inline-block;vertical-align: top; overflow-x: auto;">
      <asp:GridView ID="GridViewClicks" runat="server" onrowdatabound="GridViewClicks_RowDataBound">
      </asp:GridView>
    </div>

  </div>
</form>

使用gridview将水平滚动条添加到div？

1 个答案: