asp.net - 当我设置宽度时，为什么 GridView 宽度没有在整个页面上扩展 100%？

Question

我有以下标记，我从 div 中取出了额外的东西，因此更容易理解。我使用可折叠面板扩展器将 GridView 设置为 100%，它在页面上显示正常。然后，而不是做可折叠的面板扩展器和使用 Accordion 面板，gridview 只根据需要扩展，无论我将宽度设置为多少。下面是标记:

<div>
    <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0"
                   HeaderCssClass="collapsePortfolioHeader"
                   FadeTransitions="true" 
                   FramesPerSecond="40" 
                   TransitionDuration="250" 
                   AutoSize="None">
        <Panes>
            <cc1:AccordionPane runat="server">
                <Header>
                    Create Portfolio</Header>
                <Content>
                    <br />
                    <div style="height: 290px;">
                        <div style="float: left; width: 250px; 
                                    margin-right: 75px;">
                        </div>
                        <div style="float: left; width: 250px;">
                        </div>
                        <div style="float: left; width: 70px; 
                                    margin: 5px;">
                        </div>
                        <div style="float: left; width: 250px; 
                                    margin: 5px;">

                        </div>
                        <div class="clear"> //just a clear both;
                        </div>
                    </div>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane runat="server">
                <Header>
                    Create Portfolio By Location</Header>
                <Content>

                    <div style="height: 150px;">
                        <div style="float: left; width: 170px; 
                                    margin: 5px;">

                        </div>
                        <div style="float: left; 
                                    margin-right: 5px;">
                        </div>
                        <div style="float: left; width: 250px;
                                    margin-right: 5px;">

                        </div>
                        <div style="float: left; width: 70px; 
                                    padding-top: 100px;">
                        </div>
                        <div style="float: left; width: 250px; 
                                    margin-left: 15px;">

                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </Content>
            </cc1:AccordionPane>
        </Panes>
    </cc1:Accordion>
</div>

<div class="grid"> //the grid class just has margin:0;
// GridView goes here
</div>

Answer 1

赛软

不确定您的环境有何不同。但是我采用了您在问题中粘贴的代码，添加了一个 GridView ，用一些测试数据填充它并将宽度设置为 100%，它跨越了整个页面。我唯一能想到的是你的 CSS 中有一些东西可能会导致它。它适用于不同页面的事实意味着它可能不是 CSS(嗯)。可能是此页面的本地内容？

我不认为它与 Accordian 有任何关系。

看看下面复制的代码，这是我在我的测试元素中所拥有的并且它有效。

我建议从一个没有 CSS 的新页面开始，然后从那里开始。如果没有看到您的整个 CSS，这将很难回答。

<div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="collapsePortfolioHeader"
                FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None">
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>
                            Create Portfolio</Header>
                        <Content>
                            <br />
                            <div style="height: 290px;">
                                <div style="float: left; width: 250px; margin-right: 75px;">
                                </div>
                                <div style="float: left; width: 250px;">
                                </div>
                                <div style="float: left; width: 70px; margin: 5px;">
                                </div>
                                <div style="float: left; width: 250px; margin: 5px;">
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>
                            Create Portfolio By Location</Header>
                        <Content>
                            <div style="height: 150px;">
                                <div style="float: left; width: 170px; margin: 5px;">
                                </div>
                                <div style="float: left; margin-right: 5px;">
                                </div>
                                <div style="float: left; width: 250px; margin-right: 5px;">
                                </div>
                                <div style="float: left; width: 70px; padding-top: 100px;">
                                </div>
                                <div style="float: left; width: 250px; margin-left: 15px;">
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
        </div>
        <div class="grid">
            <asp:GridView ID="GridView1" runat="server" Width="100%">
            </asp:GridView>
        </div>