Результаты поиска по запросу

Question

Я использую страницу поиска в php. мне нужно, чтобы показать результаты, как на следующем рисунке

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

Также дайте мне знать, как я могу ограничить колонку, чтобы иметь не более 50 слов. полная информация будет доступна через гиперссылку в каждой строке.

Answer 1

Это идеальная ситуация для использования стола.

Не просто предположите, что «конструкция без таблиц лучше, чем дизайн с таблицами», таблицы предназначены для использования с табличными данными, и ваш дизайн четко подходит.

О четный/нечетный ряд окраски, если вы нацелены на современные браузеры, используйте следующее правило:

table tr:nth-child(even) { background-color: #c0ffee; } 
table tr:nth-child(odd) { background-color: #123456; } 

Если вы нацелены также старые браузеры, вы можете использовать JavaScript для того, JQuery приходит Подходящий:

$('table tr:even').css('background-color: #123456'); 

Или добавить классы вручную в код на стороне сервера.

Об ограничении количества символов/слов в строке, что обычно делается на стороне сервера. Если вы используете движок шаблонов, такой как Smarty, тогда у вас, вероятно, будет функция для этого, но это не большая вещь, чтобы свернуться самим собой.

Answer 2

1.) Это таблица, так почему бы не использовать таблицы? 2.) Дайте каждой строке div и внутри div сделайте плавающие divs с фиксированным. 3.) См. Этот пример: http://www.bernzilla.com/design/tables/table.html