Альтернатива для следующего дизайна с использованием CSS

Question

У меня есть требование, где внешний вид такой, как показано на прикрепленном изображении

Я выполнил задачу, используя таблицы в HTML и стилизацию с использованием CSS.

Критерий состоит в том, что изображения в строке почти одинаковы (то есть два изображения), и содержание изменяется для каждой строки.Таким образом, содержание отличается в каждой строке, но изображения остаются одинаковыми для каждой строки.Просто для информации будет несколько строк.Что было бы наилучшей практикой для реализации, например дизайн, отличный от использования таблиц, где он также должен быть гибким для изменения содержимого.Или использование таблиц является лучшим вариантом.

Предложения профессионалов приветствуются.

Answer 1

Я не хочу писать это для вас, но я быстро сделал макет, чтобы вы взглянули на - http://jsfiddle.net/spacebeers/TAJdw/

Вы больше не хотите использовать таблицы для чего-либо, кроме табличной даты. Вам гораздо лучше тратить свое время на изучение CSS.

Посмотрите на мой пример. Вот как может выглядеть один экземпляр контейнера содержимого. То, что вы хотите сделать, это посмотреть на получение двух из них подряд. Создайте CSS для класса .container, затем скопируйте в него другой экземпляр .contentContainer и посмотрите, какие результаты вы получите.

Я с радостью предоставлю помощь, если вы хотите, но всегда хорошо, если вы решите сами. Здесь вы получите лучшие ответы и избежите ненужного понижения вашего вопроса.

Answer 2

Обычно рекомендуется использовать чистый CSS для таких вещей, а не для таблиц.Таблицы приводят к замедлению рендеринга вашей страницы, поскольку контент должен быть загружен до того, как механизм визуализации сможет их правильно отрисовать.

Попробуйте что-то вроде this

Answer 3

Как сказал Мез - вам нужно подумать о повторении контента - и узнать о плаваниях.Я бы очень посоветовал работать с этим сайтом

http://css.maxdesign.com.au/floatutorial/

, он научит вас всем основам проектирования с помощью divs.

А пока - вот примерно то, что выпосле.Я добавил фоновые цвета и составил все высоты и ширины, так как они не были указаны, но это должно помочь вам начать.

Если вы посмотрите на HTML, я аннотировал то, что является просто повторением более раннего контента.

http://jsfiddle.net/zandergrin/k8EsP/3/

Answer 4

Я хотел бы рассмотреть возможность использования div с фоновым стилем изображения, так что для каждой строки с одним и тем же изображением все, что вам нужно сделать, это вставить этот конкретный класс div. Затем вы можете просто расположить внешний div, чтобы получить его выглядеть правильно, хотя таблицы не самый эффективный способ создания веб-страниц, они все еще работают.