Удалить тенденцию столбцов из таблиц HTML

Question

Я работаю над созданием таблицы с 7 изображениями примерно одинакового размера. По сути, мне было интересно, есть ли способ (кроме разделения каждой строки на другую таблицу) изменить тенденцию HTML размещать все в столбцах и заставлять его размещать его на основе строк.

Вот jsfiddle того, что это такое. (Я использовал Lorem Ipsum вместо изображений) Я бы хотел, чтобы верхний и нижний ряды были в центре.

Я знаю, что могу сделать это, если бы я разбил его на три таблицы и установил в каждой из них width:xxxpx и margin: 0 auto, но предпочел бы этого не делать.

Любые предложения приветствуются.

Answer 1

Почему вы вообще не хотите создавать несколько ячеек в строке?Просто поместите все изображения, которые идут в один ряд, в одну и ту же ячейку рядом друг с другом.

Answer 2

Да, возможно, для этой проблемы лучше пойти с несколькими делениями. Можно ли сделать что-то вроде следующего:

HTML:

<div class="rows">
   <div class="top">
       <img></img>
       <img></img>
   </div>
   <div class="middle">
       <img></img> 
       <img></img>
       <img></img>
   </div>
   <div class="bottom">
       <img></img>
       <img></img>
   </div>
<div>

CSS:

.rows{
  margin:10px;
}

.top, .bottom{
  padding-left:85px;
  padding-right:85px;
}

.top, .bottom, .middle
{
  width:520px;
}

.rows img
{
  margin: 10px;
  width:150px;
}

По сути, пусть нормальный поток изображений контролирует их расположение, и вместо этого использует поля и отступы, чтобы выровнять интервал.

Answer 3

См. Свойство vertical-align .