当百分比总和相同时，如何让带边框的 div 对齐？

Question

使用 Angular Material 的 flexbox 我无法让带有边距和边框的 div 对齐。

我想要一行有 3 个盒子，每个盒子占水平面的 1/3 space，然后是一行有 2 个盒子的行 - 第一个有 1/3，第二个有 2 /3 space。如果我在框周围没有边距但有边距它会中断，这很好用。

我该如何解决这个问题？

HTML:

<body layout="column" ng-app="myApp" ng-cloak>
   Borders of divs with margins don't line up

  <div class="with-margins">
    <div layout="row">
        <div flex="33">Test</div>
        <div flex="66">Test66</div>
    </div>
    <div layout="row">
        <div flex="33">Test</div>
        <div flex="33">Test33</div>
        <div flex="33">Test33</div>
    </div>
  </div>

  Borders of divs without margins line up fine
  <div class="no-margins">
    <div layout="row">
        <div flex="33">Test</div>
        <div flex="66">Test66</div>
    </div>
    <div layout="row">
        <div flex="33">Test</div>
        <div flex="33">Test33</div>
        <div flex="33">Test33</div>
    </div>
  </div>
</body>

CSS:

body {
  width : 100%;
  background-color: #dedede; 
  padding: 2px;
}

div {
  background-color : #c14543;
  border: 1px solid black;
}

div.with-margins>div>div {
  margin: 0 10px;
}

body>div,
body>div>div {
  background: inherit;
  border: none;
}

div.no-margins {
  margin-top: 10px;
}

这是演示我的问题的代码笔。 http://codepen.io/craigsh/pen/ZWxGEQ

Answer 1

问题是边距需要额外的空间。

我认为您可能只需要重新调整您的布局。这对你有用吗？见 http://codepen.io/anon/pen/NNYqLG

我更换了一个 div 来跨越只是为了快速避开你的 div 背景 css。

<div layout="row" layout-margin>
    <div flex="33">Test</div>
    <div flex="66">Test66</div>
</div>
<div layout="row" layout-margin>
    <div flex="33">Test</div>
    <span flex="66" layout="row">
      <div flex>Test33</div>
      <span flex="none" style="width:15px"></span>
      <div flex>Test33</div>
    </span>  
</div>

背后的想法是确保每一行都具有相同的结构，但每个单元格可能有自己的布局。

当百分比总和相同时，如何让带边框的 div 对齐？

How can I get divs with borders to line up when percentages sum up the same?

angular-material