如何将容器向右对齐？答案

【问题标题】：How to align the container to the right?如何将容器向右对齐？
【发布时间】：2017-04-08 09:50:45
【问题描述】：

我当前的代码呈现像图 1，我怎样才能让输出像图 2 一样呈现？

我试图搜索网络，但我发现的大多数结果都显示了如何在 css 中执行此操作

图一，

图二，

                      <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>

【问题讨论】：

不确定这是否是您想要的，但尝试设置 flow: left 到他们两个，然后将 margin-right 设置到左侧容器。
与其像现在这样使用容器布局1，不如试试容器布局2。imgur.com/a/RUi4K
@josephting 我想像容器布局 2 那样做，但我的代码输出是容器布局 1.. 我应该改变什么才能得到像容器布局 2 这样的结果。
@David 我什至不确定您使用的是什么框架，但在进行一些 Google 搜索时，它应该是 Ext.NET。我在使用 Ext.NET 方面没有广泛的知识，因此您必须自己尝试一下，同时参考文档和示例。您可能需要使用嵌套容器。换句话说，黑盒子将是主要容器，黑色容器内部有左右两个容器。将面板panel_cms004_view 和docControlNum 放在左侧容器中，将panel_cms004d_audit 放在右侧容器中。 imgur.com/eWMD8Tm
@josephting 是的，我正在使用 Ext.Net。感谢您的提示。

标签： html containers panel

【解决方案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>

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

【讨论】：

【解决方案2】：

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

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

然后：

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

【讨论】：

【解决方案3】：

我建议您使用预先存在的 css，例如 twitter bootstrap css，甚至是前端框架，而不是创建一个 .css，它们的功能和特性都非常好用。 Bootstrap 提供了一个网格系统，您可以在其中随意放置元素。

【讨论】：