0

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

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

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

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

4
  • ну и ставьте всем блокам "float:left;display:inline-block", они и будут располагаться в строчку по очереди.
    – andrew68
    10 ноя 2013 в 8:23
  • ну так расстояние то между этими блоками будет не одинаковое, точнее отступов вообще не будет
    – xenon
    10 ноя 2013 в 8:51
  • @xenon, если размеры блоков действительно фиксированные и надо при разном их количестве разместить от края до края родительского блока, при этом задав равные отступы, то одними средствами css, а уж тем более одним классом - это сделать не удастся. А если учесть, что размеры просматриваемой области у разных пользователей будут значительно разниться, то при таких условиях, в пору использовать js. Высчитывать общую доступную ширину, вычесть суммарную ширину блоков, которые будут в одной строке и оставшуюся ширину разкидать на margin между ними.
    – Deonis
    10 ноя 2013 в 9:08
  • Есть пару способов, как этого можно решить поставленную задачу. Надо только уточнить след. моменты: 1. Ширина блока-обертки этих div'ов фиксированная или резиновая? 2. Блоки будут выводится по три штуки в ряд? Или в последнем ряду может быть и два блока, и один? И если будет два блока, то как они дожны располагаться (на позиции 1-го и 2-го или 1-го и 3-го блоков)? 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
    11 ноя 2013 в 12:34
  • нужно каждому третьему выставить margin-right: 0px;, а это совсем не :last-child
    – NoName
    11 ноя 2013 в 15:48
  • 1
    тогда className:nth-of-type(3n) { margin-right: 0px; }
    – ferrari
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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