Главные новости

Урок по выводу статей в нужном количестве столбцов в заданной ширине на html и css

Урок по выводу статей в нужном количестве столбцов в заданной ширине на html и css
Красивый вывод дивов друг за другом с отступами Пример 1й нам надо вывести кучу статей в несколько столбцо,смотря какая ширина div у контента Для этого на протсых примерах я покажу как это можно реализовать Используя css float:left;, в примере будут пустые дивы закрашены зеленым цветом. Содержимое дивов,могут быть картинки с описанием отпозиционированные как угодно.

Пример1:


<style>
  .main_div_primera{ width:100%; margin:0 auto;}
  .main_div_block_primera{ margin:10px 5px 0px 5px; background:#0C6; float:left; height:200px; width:200px;}
  </style>

<div class="main_div_primera">
  <div class="main_div_block_primera"></div>
  <div class="main_div_block_primera">&nbsp;</div>
  <div class="main_div_block_primera">&nbsp;</div>
  <div class="main_div_block_primera">&nbsp;</div>
  <div class="main_div_block_primera">&nbsp;</div>
  </div>
 <div style="clear:both;"></div> Можно описать много разных примеров но данный самый простой попробуйте создать файл html и удалите 
<div style="clear:both;"></div> то данный текст поднимется вверх и налезет на те дивы что в основном блоке.

Результат:

 
 
 
 
 
 

Как видим в конце добавели див со стилем clear:both; это связано с тем что при свойстве float див теряет свою высоту основной и мы явно указали через clear что следующий за ним конетнт будет отображен под данным дивом

Пример2:

Используя ширину внутренних блоков, вы можете регулировать количество отображаемых блоков в ряд.
<style>

  .main_div_primera2{ width:100%; margin:0 auto;}

  .main_div_block_primera2{ margin:10px 5px 0px 5px; background:#0C6; float:left; height:200px; width:45%;}

  </style>


<div class="main_div_primera2">

  <div class="main_div_block_primera2"></div>

  <div class="main_div_block_primera2">&nbsp;</div>

  <div class="main_div_block_primera2">&nbsp;</div>

  <div class="main_div_block_primera2">&nbsp;</div>

  <div class="main_div_block_primera2">&nbsp;</div>

  </div><div style="clear:both;"></div>

  <br> 

Результат:

 
 
 
 
 
 

От вас остается только правильно настроить под ширину своего блока и выводить нужные статьи с заданной шириной и высотой.