我想在两行之间留出空隙,如plunkr所示,但我也想让中间的蓝色单元格在顶行的高度不同。
当我改变一个单元格的高度时,它会改变整行。我更大的一个是class="two"
我有这个html:
<md-card class="card-demo">
<md-card-title>another example</md-card-title>
<md-card-subtitle>some test work.
</md-card-subtitle>
<md-card-content>
<div fxLayout="column" ng-app="demoApp" layout-fill>
<div fxLayout="row" fxLayoutGap="20px" flex>
<div class="one" fxFlex="70"> test1 </div>
<div class="two" fxFlex="25"> test2 </div>
<div class="three" fxFlex="25"> test2 </div>
</div>
<div fxLayout="column" fxLayoutGap flex>
<div class="four" fxFlex="150"> test1
<p>one</p>
<p>one</p>
</div>
</div>
</div>
</md-card-content>
</md-card>
这个CSS:
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}
.four {
background-color: yellow;
}