0

пример блоков

В общем нужно сверстать блоки div так, чтобы они были равноудалены друг от друга, все имеют фиксированную ширину и высоту (как на прикрепленном изображении). Проблема в том, что информация в эти блоки выводится из БД с помощью php и соответственно нужно для всех 3-х блоков применить один класс CSS (засунуть один блок в цикл и дальше уже в зависимости от того, сколько в БД материалов, выводить нужное кол-во блоков). Если в классе CSS прописать отступ справа к примеру 20px, то 3-ий блок будет съезжать вниз из за нехватки места по ширине страницы.

Если бы страница была статична, то можно бы было у Левого блока сделать обтекание слева а у Правого справа, а у центрального блока сделать равный отступ с обеих сторон в зависимости от ширины страницы. Но тут надо прописывать 3 класса для 3 блоков соответственно, мне же нужно уместить всё в одном классе.

Надеюсь подробно описал суть проблемы.

4
  • ну и ставьте всем блокам "float:left;display:inline-block", они и будут располагаться в строчку по очереди.
    – andrew68
    Commented 10 нояб. 2013 в 8:23
  • ну так расстояние то между этими блоками будет не одинаковое, точнее отступов вообще не будет
    – xenon
    Commented 10 нояб. 2013 в 8:51
  • @xenon, если размеры блоков действительно фиксированные и надо при разном их количестве разместить от края до края родительского блока, при этом задав равные отступы, то одними средствами css, а уж тем более одним классом - это сделать не удастся. А если учесть, что размеры просматриваемой области у разных пользователей будут значительно разниться, то при таких условиях, в пору использовать js. Высчитывать общую доступную ширину, вычесть суммарную ширину блоков, которые будут в одной строке и оставшуюся ширину разкидать на margin между ними.
    – Deonis
    Commented 10 нояб. 2013 в 9:08
  • Есть пару способов, как этого можно решить поставленную задачу. Надо только уточнить след. моменты: 1. Ширина блока-обертки этих div'ов фиксированная или резиновая? 2. Блоки будут выводится по три штуки в ряд? Или в последнем ряду может быть и два блока, и один? И если будет два блока, то как они дожны располагаться (на позиции 1-го и 2-го или 1-го и 3-го блоков)? Commented 10 нояб. 2013 в 9:57

3 ответа 3

1

Ну можно сделать что-то вроде этого. Задать стили:

.block {margin-right: 20px;}
.last {margin-right: 0px;}

Далее, по циклу:

$count = 1;

while () { // это ваш цикл

    echo '<div class="block '.$newclass.'">Текст, который выводится из запроса к БД</div>';
    //в конце цикла каждому третьему блоку задаем дополнительный класс last
    if ($count == 3) {$newclass = 'last'; $count = 1;} else {$newclass = ''; $count++;}

}
3
  • и кому, интересно, придумали псевдоклассы - :last-child .block div{margin-right: 20px;display:inline-block;} .block div:last-child {margin-right: 0px;} <div class="block"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> </div> и без всяких IF'ов.
    – andrew68
    Commented 11 нояб. 2013 в 12:34
  • нужно каждому третьему выставить margin-right: 0px;, а это совсем не :last-child
    – NoName
    Commented 11 нояб. 2013 в 15:48
  • 1
    тогда className:nth-of-type(3n) { margin-right: 0px; }
    – ferrari
    Commented 11 нояб. 2013 в 20:35
1

Иногда я заключаю эти ваши множество блоков в обертку и указываю ей text-align: center. А самим блокам внутри, соответственно, display: inline-block.

0

Пример 1 - Использование text-align: justify

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
div {
  text-align: justify;
  font-size: 0;
}
div:after {
  width: 100%;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  content: '';
  display: inline-block;
}
div > div {
  background: #ссс;
  width: 100px;
  height: 100px;
  display: inline-block;
  text-align: left;
  border: 1px solid #000;
  line-height: normal;
  font-size: 14px;
  vertical-align: top;
}
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Пример 2 - Использование display: flex и justify-content: space-between

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.wrap {
  display: -webkit-box;                       /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;                          /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;                       /* TWEENER - IE 10 */
  display: -webkit-flex;                      /* NEW - Chrome */
  display: flex;                              /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-justify-content:space-between;      /*Chrome */
  justify-content: space-between;             /* NEW, Spec - Opera 12.1, Firefox 20+ */  
}
.wrap > div {
  width: 100px;
  border: 1px solid black;
  background: #fff;
  height: 100px;
}
<div class="wrap">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>  
</div>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.