Как правильно настроить вывод статей из БД?

Question

[ibr_98]

Вот есть код:

<!--переменная "$in" берет данные из mysql-->
  <div class="wrap">
    <h1><?= $in['title']; ?></h1> <!--заголовок статьи-->
      <h3><?= $in['tet']; ?></h3> <!--сама статья-->
      <h4><?= $in['id']; ?></h4> <!--порядковый номер-->
    </div>

.wrap {
    width: 50%;
    height: 30%;
    margin: 0 auto;
     background: #A5A5A5;
    font-family: arial;
    border-radius: 5px;
  }

И когда публикую статьи, получается вот это смотрите фото: https://i.mycdn.me/image?id=852629842479&t=3&plc=W... , статьи уплывают вниз по кривой.. (по какой-то причине не получилось загрузить фото на тостер с компьютера).
Помогите исправить html-код или css, чтобы статьи публиковались раздельно друг от друга, спасибо

Answer 1

[GrimJack]

Каким циклом выводите?
Как выглядит выведенный контент в инспекторе?

Comments

[ibr_98]

вот цикл: while ($in = mysqli_fetch_array($re)) а как выглядит - я же скинул в описании ссылку на фото

[GrimJack]

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

[ibr_98]

Михаил Шпаков: что такое инспектор?)

[GrimJack]

ibr_98: f12 в хроме, откроет вам новый мир разработки

[ibr_98]

Михаил Шпаков: ладно, спасибо

Answer 2

[Janny]

display: inline-block;
float:left;

Comments

[ibr_98]

почти получилось, только хотелось чтоб они раздельно друг от друга были, и располагались по центру, а не по левому краю вот фото https://i.mycdn.me/image?id=852631584047&t=3&plc=W...

[Janny]

ibr_98: margin-top: 20px;

[ibr_98]

Janny: спасибо

Answer 3

[xmoonlight]

clear:both;
float:left;
display:inline-block;

Comments

[ibr_98]

да, получилось, но хотелось бы чтоб статьи по середине были, и раздельно друг от друга вот фото https://i.mycdn.me/image?id=852631584047&t=3&plc=W...

[xmoonlight]

ibr_98: а про CSS почитать немного не проще будет?

[ibr_98]

xmoonlight: я с ним уже год как связан, понять хотя бы на среднем уровне до сих пор не могу
и на этом спасибо

[xmoonlight]

ibr_98: Минимальные знания для вёрстки:
1. Убедитесь, что Вы знаете все единицы измерения и медиа-селекторы для CSS3 и умеете их применять.
2. Знаете основные приёмы позиционирования блоков по горизонтали и вертикали.
3. Знаете поведение объектов при различных свойствах отображения (свойство "display");
4. Знаете поведение различных типов контейнеров при позиционировании, масштабировании, "обтекании" с разных сторон (свойство "clear"),
5. Представляете принципы и методы позиционирования нужного объекта по центру, по ширине и по высоте относительно родительского контейнера.
6. Знаете для чего нужны и как работают псевдоэлементы и перечислители.
7. PixelPerfect: Всегда у контейнера разметки "сетки" объектов не забывать ставить display:inline-block;font-size:0;float:left; На внутренние объекты контейнера - шрифт задаётся отдельно!