Список элементов 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. Ионная сетчатая система основана на flexbox CSS3. Класс 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/