@Byrger
Разработчик ПО для платежных систем

Как сверстать блок списком?

Привет всем.
Проблемка с версткой блока. никак не могу понять.
Использую Jquery Mobile Framework

Проблема в том как вытянуть последний блок .ui-block-c для того чтобы бордер слева у него тянулся до конца
И как сделать чтоб изображение в нем же было по центру

ceef7ef65b13f537dde10abd4ab5582a.png

HTML:
<div id="items-list" data-theme="none">
                <div class="ui-grid-c grid_list_items click_item"  data-theme="none">
                    <div class="ui-block-a">
                        <img src="http://alcotap.ru/upload/{{image}}" class="image_view" />
                    </div>
                    <div class="ui-block-b" data-theme="none">
                        <strong>{{name}}</strong><br />
                        <span class="item_price">Цена: {{min_price}}-{{max_price}}р</span>
                    </div>
                    <div class="ui-block-c">
                        <img src="images/view_item.png" alt="" class="image_click_view" />
                    </div>
                </div>
            </div>


CSS:
.image_view{
    height: 40px;
}
.image_click_view{
    padding-top: 17px;
    padding-bottom: 17px;
    height: 15px;
    width: 8px;
}

.grid_list_items.ui-grid-c{
    border-bottom: 1px solid #bfbfbf;
    min-height: 55px;
    width: 100%;
    background-color: #FFF;
}
.grid_list_items.ui-grid-c .ui-block-a{
    width: 18%;
    max-width: 55px;
    padding: 5px 0 5px 5px;

}
.grid_list_items.ui-grid-c .ui-block-b{
    width: 65%;

    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 55px;

}
.grid_list_items.ui-grid-c .ui-block-c{
  border-left: 1px solid #bfbfbf;
    width: 17%;
    height: 100%;
    max-width: 55px;
    min-height: 55px;
    max-height: 80px;
    text-align: center;
    float: right;
}
.grid_list_items.ui-grid-c .ui-block-c img {
    display:inline-block;
    vertical-align:middle;
    overflow: hidden;
}
  • Вопрос задан
  • 150 просмотров
Решения вопроса 1
@kgorozhanov
Front-End Developer
как вариант https://jsfiddle.net/eLn5wobd/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы