材料設計網格寬度不調心

小提琴： http://jsfiddle.net/hectooorr/dcwt3to2/材料設計網格寬度不調心

我有2個問題。無法將兩個容器相鄰排列。無法獲得一致的寬度。

第一個問題：如何獲得2個容器在寬度均爲50％時彼此相鄰排列？在我的情況下，我總是會有兩個容器，每個都有50％的寬度。當我這樣做時，我的容器不對齊。應該在他們自己的行中添加這2個，並將50％添加到另一個，並向另一個添加flex？

<div layout="row" layout-margin layout-fill layout-wrap class="custom-chart-list"> 
<div flex="100" class="custom-container">container 1: 100% width - why does this width exceed width of containers 2 and 3?</div> 
<div flex="50">container 2: 50% width</div> 
<div flex="50">container 3: 50% width</div> 
<div flex="100" class="custom-container">100% width</div> 
<div flex="50">container 4: 50% width</div> 
<div flex="50">container 5: 50% width - Why won't this stack next to container 4?</div>

問題二：爲什麼撓曲的容器= 「100」超過每2個容器的寬度用50％？見下面的例子。第一行的flex爲100.第二個容器的flex爲50，第三個flex只有'flex'屬性。

來源

2015-09-27 Hectooorr

這是發生由於給予'div'的'margin'。以獲得它的覆蓋刪除像'margin：0px！important'''邊緣''' –

@Amitsingh我仍然想保留每個容器周圍的邊距。 – Hectooorr

這裏是我的固定 http://jsfiddle.net/hectooorr/etmpLnkv/

<md-content flex class="custom-main-content" md-scroll-y role="main"> 
<div layout="row" layout-align="space-around center" layout-wrap class="custom-flex-grid"> 
    <div flex="100" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">test</div> 
      <div class="custom-footer">test</div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 
      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="100" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <div layout="row" layout-fill> 
        <div flex> 
         <h3>Title</h3> 

        </div> 
        <div flex="30">legend</div> 
        <div flex="30" flex-gt-lg="10"> 
         <select class="form-control input-sm"> 
          <option>Hours</option> 
          <option>Option 2</option> 
          <option>Option 3</option> 
          <option>Option 4</option> 
         </select> 
        </div> 
       </div> 
      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
    <div flex="50" class="custom-flex-grid-tile"> 
     <div class="custom-flex-grid-tile-inner"> 
      <div class="custom-header"> 
       <h3>Title</h3> 

      </div> 
      <div class="custom-content">chart</div> 
      <div class="custom-footer"></div> 
     </div> 
    </div> 
</div>

來源

2015-09-28 14:50:44 Hectooorr

材料設計網格寬度不調心

回答

相關問題