如何让元素 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/ .
最佳答案
您没有使用 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/
关于html - 列出彼此下方的 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37288255/