Как выровнять элементы с разной высотой сверху и снизу в ячейках таблицы?

0

Я работаю над сайтом Drupal, который продвигает сельские продукты и услуги нескольких поставщиков. На главной странице я показываю несколько элементов в сетке, каждый на "карточке продукта" (поставщик, адрес, телефон, изображение продукта, название продукта, цена, кнопка "Купить"). Поскольку каждая часть этих атрибутов продукта может иметь разную длину, макет страницы очень запутан (см. Этот снимок экрана: http://tinypic.com/r/2i1ede9/5).

На самом деле у меня есть два вопроса по этому вопросу:

  1. Есть ли какой-либо метод веб-дизайна, как красиво отображать элементы различной высоты в контейнерах размером с фиксированный размер? Можно ли выровнять их высоту?
  2. Как выровнять один div (vm_prod_cat) с вершиной и другим (offsite_selling) до нижней части ячейки? Это может решить мою проблему более или менее: данный компонент карт продукта (например, адрес поставщиков) не будет иметь равную высоту, но макет будет выглядеть сбалансированным. Я попытался добавить 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>
Теги:
layout
drupal
alignment

1 ответ

0
Лучший ответ

Вы можете использовать правила отображения таблицы: таблицы, чтобы иметь поля, которые ведут себя как таблицы:

.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; , ничто не остановит их рост на их высоте. Вам нужно установить минимальную безопасную высоту.

Поделиться
  • 0
    Спасибо за ответ. Однако это все еще не работает: добавление отображения: table-row; для <div class = "vm_prod_cat prod_cat_tur"> логотип из верхней части окна полностью исчез. (Логотип является фоновым изображением с явной высотой)
  • 0
    тогда вам нужно просто дать ему явную высоту и вставить & nbsp; Caractere. С этим контентом браузер обернет его в элемент с display: table-ceel; значение (так же, как <tbody> добавляется в таблицу HTML, когда не написано в коде. Демо обновлено :)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню