MD-Card가 전체 가로 너비를 취하지 않게하려면 어떻게합니까? 어떻게 나란히 놓을 수 있습니까?

Question

저는 측 프로젝트에서 angular2-material을 사용 해왔고 카드를 가로로 쌓을 수 없었습니다. 자동으로 전체 너비를 차지합니다. CSS 클래스를 통해 너비를 제한해도 스택되지 않습니다. 이후에 배치 된 모든 카드는 여전히 이전 카드 아래에 배치됩니다.

카드를 가로 방향으로 나란히 놓고 (화면 가장자리에 올 때 적절히 감싸는) 카드를 가져 오는 방법에 대한 지침을 알려 주시면 감사하겠습니다.

Answer 1

당신은 flex-box 사용할 수 있습니다

https://jsfiddle.net/ntmrtnwu/

HTML

<div class="parent"> 
    <div class="child"> </div> 
    <div class="child"> </div> 
    <div class="child"> </div> 
</div> 

CSS

.parent { 
    display: flex; 
    justify-content: space-between; 
} 
.child { 
    margin: 10px; 
    background: red; 
    width: 100%; 
    height: 20px; 
} 

다시 자식 div를 <md-card></md-card> 선택자로 배치하고 flex 속성을 가진 상위 div 안에 배치하십시오. 일해야한다. 당신이 할 수없는 경우는 플렉스

http://plnkr.co/edit/zHndJLKRSvTQUV1G6Bgp

Answer 2

플렉스 박스을 기능과 내가 Material2에

편집

재료 2 plunker와 plnkr을 만들 수 있습니다 작동하는 최신의 방법입니다 다른 답변에서 볼 수 있듯이 모든 브라우저에서 완전히 지원되지 않으므로 몇 가지 브라우저에서 문제가 발생할 수 있습니다. 그 외에도 Twitter-bootstrap-css도 가능합니다. 다음과 같이 사용하십시오.

<div class="col-xs-12"> 
    <div class="col-sm-6"> 
      <md-card> 
        ... 
      </md-card> 
    </div> 

    <div class="col-sm-6"> 
       <md-card> 
        ... 
       </md-card> 
    </div> 
</div>