将div元素列在彼此之下

Question

我如何让第1-4项直接排在彼此之下？

.remove-top-border {
  border-top: none;
}

.remove-bottom-border {
  border-bottom: none;
}

.remove-top-padding {
  padding-top: 0px;
}

<div class="list">

  <div class="item item-input-inset remove-bottom-border">
    <div class="row">
      <div class="col bold">Cost</div>
    </div>
  </div>

  <div class="item item-input-inset remove-top-border remove-top-padding">
    <div class="col col-75">Item 1</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 2</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 3</div>
    <div class="col col-25">£20</div>
    <div class="col col-75">Item 4</div>
    <div class="col col-25">£20</div>
  </div>

</div>

输出

上面的代码现在返回。

这是我的jsfiddle：http://jsfiddle.net/39nszmww/2/。

Answer 1

您没有正确使用col课程。 Ionic网格系统基于CSS3 flexbox。 col类划分为百分比，总计可达百分之百。因此，您可以将行分成任意数量的cols，只要它们不超过100（否则，网格会发生错误，就像发生在您身上一样）。

因此<div class="col col-50">会创建一个占据行宽度50％的列。

要解决您的问题，请将每个项目拆分为单独的行。 另外，删除item-input-inset类，因为它会阻止网格垂直扩展。

<div class="item">
    <div class="row">
        <div class="col col-75">Item 1</div>
        <div class="col col-25">£20</div>
    </div>
    <div class="row">
        <div class="col col-75">Item 2</div>
        <div class="col col-25">£10</div>
    </div>
    <div class="row">
        <div class="col col-75">Item 3</div>
        <div class="col col-25">£30</div>
    </div>
</div>

JSFiddle：http://jsfiddle.net/0tcdr9dg/