CSS для создания сетки ячеек, каждая из которых заполняет 100% высоты своего ряда - PullRequest
Новая
       15

CSS для создания сетки ячеек, каждая из которых заполняет 100% высоты своего ряда

0 голосов
/ 29 декабря 2011

Example screenshot

Как показано в примере выше, я пытаюсь создать сетку из ящиков / ячеек.Я хочу, чтобы он выглядел лучше, чем на скриншоте, и Я хочу, чтобы нижняя часть каждой ячейки расширялась вниз , чтобы выровняться с нижней частью самой высокой ячейки в ряду.Я знаю, что существует около миллиона постов для решения 100% проблем с ростом, но ни один из них не подходит для этого случая.

Требования:

  • Нет фоновых изображений
  • Нет JavaScript
  • Должен работать сследующий Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> (Drupal 7)
  • Но я очень гибок с разметкой и CSS, например, я в порядке с добавлением дополнительных чистых div-ов или даже переделыванием всего этого сстолы.

Вот код, который я использовал для создания снимка экрана выше:

HTML: 

<div class="row">
  <div class="cell">Here is a grid of several cells. We want each cell to extend down to the bottom of the row.</div>
  <div class="cell">This cell it too short. </div>
</div>
<div class="row">
  <div class="cell">This cell should extend down to the bottom.</div>
  <div class="cell">We don't want to use background images or javascript. But the markup and CSS can be made however is best. Each row should contain cells of equal size.</div>
</div>

CSS: 

.row {
  clear: both;
}

.cell {
  background: #CCC;
  border-radius: 10px;
  border: 2px solid #AAA;
  float: left;
  margin: 5px;
  padding: 5px;
  width: 200px;
}

Ответы [ 2 ]

3 голосов
/ 29 декабря 2011

Вы можете достичь этого с display:table-row и display:table-cell (если только вам не нужна поддержка IE7 и ниже):

http://jsfiddle.net/ptriek/nFeCw/

.row {
    display:table-row;
}

.cell {
  background: #CCC;
  border-radius: 10px;
  border: 2px solid #AAA;
  display:table-cell;
  margin: 5px;
  padding: 5px;
  width: 200px;
}
2 голосов
/ 30 декабря 2011

Вот что у меня получилось ...

enter image description here

HTML: 

<table><tbody>
  <tr>
    <td>Here is a grid of several cells. We want each cell to extend down to the bottom of the row.</td>
    <td>This cell it too short. </td>
  </tr>
  <tr>
    <td>This cell should extend down to the bottom.</td>
    <td>We don't want to use background images or javascript. But the markup and CSS can be made however is best. Each row should contain cells of equal size.</td>
  </tr>
</tbody></table>

CSS: 

table {
  border-spacing: 10px;
  margin: -10px;
  border-collapse: separate;
}

td {
  background: #CCC;
  vertical-align: top;
  border-radius: 10px;
  border: 2px solid #AAA;
  display: table-cell;
  padding: 5px;
  width: 200px;
}
...