Привет всем.
Проблемка с версткой блока. никак не могу понять.
Использую Jquery Mobile Framework
Проблема в том как вытянуть последний блок .ui-block-c для того чтобы бордер слева у него тянулся до конца
И как сделать чтоб изображение в нем же было по центру
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;
}