메인 컨텐츠가 정렬되지 않은 앵글 머티리얼 위치 지정 사이드 나비

Question

사이드 바 (왼쪽 고정)와 메인 컨텐츠 영역이 서로 옆에 위치하려고합니다.

div와 md-content를 중첩하고 행과 열 레이아웃을 전환/조합하는 다양한 조합을 시도했습니다. 인라인 CSS와 코드는 무시하십시오. 이것은 모난 소재를 테스트하는 연습입니다.

다음은 html 레이아웃입니다.

<div layout="row"> 
     <md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="true" md-disable-backdrop="" md-whiteframe="4" style="min-height:500px; max-width: 200px"> 
     <md-toolbar> 
      <h3 class="md-toolbar-tools">Site Sections</h3> 
     </md-toolbar> 
     <md-list ng-cloak=""> 
      <md-list-item ng-repeat="page in adminClient.sites[0].pages"> 
      <a> {{ page.name }} </a> 
      <md-divider></md-divider> 
      </md-list-item> 
     </md-list> 
     </md-sidenav> 
     <div layout="column" style="max-width: 800px;"> 
     <md-toolbar class="md-accent" style="height: 30px;"> 
      <h4 class="header-h4">Documents for site: {{adminClient.sites[0].domain}}</h4> 
     </md-toolbar> 
     <document-list></document-list> 
     </div> 
    </div> 

당신이 일반적으로 레이아웃에 대한 질문이 있으면 알려주세요 Plunker

관련 마크 업 - 여기

http://plnkr.co/edit/ppY0gGVgTLKXxYXiW6eV?p=preview

Answer 1

당신이 이동 : 여기

<div flex="grow" style="width: 1200px"> 
    <md-toolbar class="md-hue-2" style="height: 20px"> 
     <div class="md-toolbar-tools"> 
     <h2> 
      <span>Document List Editing</span> 
     </h2> 
     <span flex=""></span> 
     <md-button class="md-icon-button" aria-label="Profile"> 
      <md-icon md-svg-icon="imgs/ic_perm_identity_white_18px.svg"></md-icon> 
     </md-button> 
     <md-button class="md-icon-button" aria-label="More"> 
      <md-icon md-svg-icon="imgs/ic_more_vert_white_18px.svg"></md-icon> 
     </md-button> 
     </div> 
    </md-toolbar> 
    <br /> 
    <md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="true" md-disable-backdrop="" md-whiteframe="4" style="min-height:500px; max-width: 200px"> 
     <md-toolbar> 
     <h3 class="md-toolbar-tools">Site Sections</h3> 
     </md-toolbar> 
     <md-list ng-cloak=""> 
     <md-list-item ng-repeat="page in adminClient.sites[0].pages"> 
      <a> {{ page.name }} </a> 
      <md-divider></md-divider> 
     </md-list-item> 
     </md-list> 
    </md-sidenav> 
    <div layout="column" style="max-width: 800px;"> 
     <md-toolbar class="md-accent" style="height: 30px;"> 
     <h4 class="header-h4">Documents for site: {{adminClient.sites[0].domain}}</h4> 
     </md-toolbar> 
     <document-list></document-list> 
    </div> 
    </div> 

는 작업 plnkr입니다 도와 드리겠습니다.