2016-11-24 1 views
2

현재 코드가 그림 1과 같이 렌더링됩니다. 그림 2와 같이 출력을 렌더링하려면 어떻게해야합니까? 컨테이너를 오른쪽으로 정렬하는 방법은 무엇입니까?

나는 웹 검색을 시도하지만 결과 대부분의 나는, 그림이, 그림 하나 css

enter image description here

을이 작업을 수행하는 방법을 보여 발견

enter image description here

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

원하는 것이 맞는지는 모르겠지만 흐름을 설정해보십시오. 둘 다 왼쪽으로두고 왼쪽 컨테이너에 여백을 설정하십시오. – malutki5200

+0

지금처럼 컨테이너 레이아웃 1을 사용하는 대신 컨테이너 레이아웃 2를 시도하십시오. http://imgur.com/a/RUi4K – josephting

+0

@josephting 컨테이너 레이아웃 2처럼하고 싶지만 코드 출력은 컨테이너 레이아웃 1입니다. 컨테이너 레이아웃 2와 같은 결과를 얻으려면 무엇을 변경해야합니까? – David

답변

0

CSS의 문제점은 무엇입니까? 같은 것을 할 : 다음

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

과 :

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

을 대신 나는 그들이 기능이 트위터 부트 스트랩 CSS 또는 프론트 엔드 프레임 워크와 같은 기존 CSS를 사용하도록 권장 것 .CSS를 만드는 매우 잘 작동하는 기능을 제공합니다. 부트 스트랩을 사용하면 원하는대로 요소를 배치 할 수있는 그리드 시스템이 제공됩니다.

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

일부 편집을 했습니까? 패널과 컨테이너의 레이아웃을 추가해야한다는 사실을 알게되었습니다.

관련 문제