html - 列出彼此下方的 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 类分为百分比，其总和应为 100%。因此，只要不超过 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/