query('SELECT postID, postTitle, postDesc, postDate FROM blog_posts ORDER BY postID DESC');
            while($row = $stmt->fetch()){

                echo '
'; echo '

'.$row['postTitle'].'

'; echo '

Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).'

'; echo '

'.$row['postDesc'].'

'; echo '

Read More

'; echo '
'; } } catch(PDOException $e) { echo $e->getMessage(); } ?>

Этот код загружает данные по строкам. Мне нужно загрузить данные бок о бок.

jkdesigns

Ответов: 1

Ответы (1)

Ваш вопрос немного расплывчат, вы не говорите, в чем, собственно, заключается ваша проблема. Ваше текущее решение явно генерирует разметку таким образом, что детали, которые вы визуализировали, помещаются в элементы параграфа. Элементы параграфа, очевидно, визуализируются вертикально друг под другом.

Если ваша проблема заключается только в том, что вы хотите, чтобы детали были выровнены по горизонтали рядом друг с другом, то у вас есть несколько подходов, которые вы можете попробовать:

Первый подход:

.

Вы можете просто изменить правила таблицы стилей (css) для соответствующего отображения элементов параграфа:

p {
  display: inline-block;
}

Как бы то ни было, это считается уродливым, поскольку нарушает семантический смысл абзаца...

.

Второй подход:

.

Вы можете просто изменить способ создания разметки на что-то подобное:

echo '
'; echo '

'.$row['postTitle'].'

'; echo '
Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).'
'; echo '
'.$row['postDesc'].'
'; echo ''; echo '
';

Затем добавьте такое css-правило в определение таблицы стилей:

div.cell {
  display: inline-block;
}

Это считается чистым и правильным подходом.

Третий подход:

.

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

Поэтому я бы не рекомендовал применять такой подход.


Редактирование: Ладно, похоже, что все это было напрасно, потому что вопрос был, как уже отмечалось, расплывчатым. Типичный пример того, как много усилий пропало даром из-за недостаточно точного вопроса...

Согласно вашему комментарию здесь, вы хотите, чтобы внешние div были выровнены по бокам.

На самом деле я уже дал ответ выше, но я, конечно, могу повторить его здесь в точном соответствии с тем, о чем вы спрашиваете в комментарии:

Просто четко обозначьте контейнеры для специального выравнивания, добавив класс:

echo '
'; echo '

'.$row['postTitle'].'

'; echo '

Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).'

'; echo '

'.$row['postDesc'].'

'; echo '

Read More

'; echo '
';

Тогда добавьте правило стиля для этого:

div.outer {
  display: inline-block;
}

Я создал fiddle, демонстрирующий этот эффект: https://jsfiddle.net/oLrugrLn/

2022 WebDevInsider