Question

使用Angular Material的弹性框我无法获得具有边距和边框的div来排队。

我想要一个有3个盒子的行，每个盒子占据水平空间的1/3，然后是一个有2个盒子的行 - 第一个有1/3，第二个有2/3空间。如果我没有在盒子周围留下边距但是边缘会断裂，这样可以正常工作。

我该如何解决这个问题？

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？

1 个答案: