Я работаю над сайтом Drupal, который продвигает сельские продукты и услуги нескольких поставщиков. На главной странице я показываю несколько элементов в сетке, каждый на "карточке продукта" (поставщик, адрес, телефон, изображение продукта, название продукта, цена, кнопка "Купить"). Поскольку каждая часть этих атрибутов продукта может иметь разную длину, макет страницы очень запутан (см. Этот снимок экрана: http://tinypic.com/r/2i1ede9/5).
На самом деле у меня есть два вопроса по этому вопросу:
display: inline-block;
и the vertical-align: top;
или vertical-align: bottom;
но они не сработали для меня.Drupal генерирует сетку с этими ячейками таблицы и divs:
<tr class="row-3 row-last">
<td class="col-1 col-first">
<td class="col-2">
<div class="vm_prod_cat prod_cat_tur">
<div>
<div class="views-field views-field-uc-product-image">
<div class="vm_product">
<div class="offsite_selling">
</td>
<td class="col-3 col-last">
</tr>
Вы можете использовать правила отображения таблицы: таблицы, чтобы иметь поля, которые ведут себя как таблицы:
.gal {
width:80%;
margin:auto;
text-align:center;
min-width:350px;
}
.gal article {
display:inline-table;
height:300px;
width:30%;
min-width:100px;
box-shadow: 0.5em 0.5em 0.5em,
inset 0 0 0 1px;;
margin:10px;
}
.gal article > header ,
.gal article > footer ,
.gal article > div {
display:table-row;
padding:0.5em;
background:gray
}
.gal article > div {
display:table-cell;
height:100%;
vertical-align:middle;
background:rgba(0,0,0,0.2);
}
<section class="gal">
<article>
<header>
header that takes room it needs
</header>
<div>
content that takes room left
</div>
<footer>
footer that takes room needed
</footer>
</article>
<!-- ... and so on -->
см. тест здесь: http://codepen.io/gc-nomade/pen/ALifh
каждая статья может расти одна. Чтобы избежать их роста по ширине, добавьте table-layout:fixed;
, ничто не остановит их рост на их высоте. Вам нужно установить минимальную безопасную высоту.