Question

我的当前代码呈现如图1，如何使输出像图2一样呈现？

我尝试搜索网络，但我发现的大部分结果都显示了如何在css

中执行此操作

Pic one，

图2，

                      <ext:Container id="Container1" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 10 0" >
                        <Items>   
                      <ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Region="East" Height="180" Width="700" Split="true">
                           <Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" >
                                 <LoadMask ShowMask="true"></LoadMask>
                           </Loader>
                      </ext:Panel>  


                     <ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Region="East" Height="180" Width="428" Split="true">
                           <Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" >
                                 <LoadMask ShowMask="true"></LoadMask>
                           </Loader>
                      </ext:Panel>

                      </Items>
                    </ext:Container>

                     <ext:Container id="Container8" runat="server" layout="HBoxLayout" width="2000" marginSpec="0 0 0 0">
                        <Items>   

                      <ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Region="East" Height="265" Width="700" Split="true">
                           <Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" >
                                 <LoadMask ShowMask="true"></LoadMask>
                           </Loader>
                      </ext:Panel>     
                        </Items>
                     </ext:Container>

Answer 1

                      <ext:Container id="Container1" runat="server" Height="700"  marginSpec="0 0 0 0" Layout="VBoxLayout" >
                        <Items>   
                      <ext:Panel ID="panel_cms004_view" Title="Document Control Profile" runat="server" AutoScroll="true" Height="180" Width="700" Layout="VBoxLayout">
                           <Loader ID="cms004_view" runat="server" Url="../CMS/cms004_view.aspx" Mode="Frame" AutoLoad="true" Height="200">
                                 <LoadMask ShowMask="true"></LoadMask>
                           </Loader>
                      </ext:Panel>  

                      <ext:Panel ID="docControlNum" Title="Document Control Number" runat="server" AutoScroll="true" Height="248" Width="700" Layout="VBoxLayout">
                           <Loader ID="cms004d_view" runat="server" Url="../CMS/cms004d_view.aspx" Mode="Frame" AutoLoad="true" Height="700">
                                 <LoadMask ShowMask="true"></LoadMask>
                           </Loader>
                      </ext:Panel>     


                      </Items>
                    </ext:Container>

                     <ext:Container id="Container8" runat="server" marginSpec="0 0 0 700" Layout="VBoxLayout" Height="700" Width="430">
                        <Items>   
                       <ext:Panel ID="panel_cms004d_audit" Title="Document Control Number - Audit" runat="server" AutoScroll="true" Height="425" Width="433"  Layout="VBoxLayout">
                           <Loader ID="cms004d_audit" runat="server" Url="../CMS/cms004d_audit.aspx" Mode="Frame" AutoLoad="true" Height="700" Width="430" >
                                 <LoadMask ShowMask="true"></LoadMask>
                           </Loader>
                      </ext:Panel>
                        </Items>
                     </ext:Container>

做了一些编辑。发现需要添加面板和容器的布局。

Answer 2

CSS的问题是什么？做这样的事情：

.right {
 position: absolute;
 right: 0px;
      }

然后：

<div class="right">
 // your html
</div>

Answer 3

而不是创建.css我建议你使用预先存在的css，如twitter bootstrap css，甚至是前端框架，它们具有功能和功能非常好的前端框架。使用Bootstrap，它会出现一个网格系统，您可以在其中放置您想要的元素。

如何将容器对齐？

3 个答案: