Красивый div блок css: #7 – Стили для блоков

Leave a Comment / Css / By /

html — Равноудаленные блоки DIV

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

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

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

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

  • html
  • css
  • php

4

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

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

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

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

3

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

Пример 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>
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>  
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Приемы оформления границ блока с помощью CSS – Dobrovoimaster

Однажды я уже как то касался темы форматирования блоков средствами CSS в статье 5 CSS Стилей для блока с фоном. Сегодня расскажу как благодаря CSS3 мы можем расширить свои возможности при оформлении блочных элементов страницы.

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

Мне хотелось бы поделиться некоторыми приемами стилизации границ, для получения различных эффектов оформления блоков. Экспериментируя с параметрами стиля вы  всегда сможете добиться желаемого результата, благо возможности CSS3 это нам позволяют.

Работая над стилями, по прежнему стоит помнить о том, что каждый браузер отображает по своему, все что мы делаем.  Например то как поддерживает CSS пресловутый Internet Explorer , начинает вызывать уже тошноту.  В других современных браузерах все выглядит просто и со вкусом.

1. Легкий Пресс


 
Обзовите этот эффект как хотите, я не стал умничать и назвал так «Легкий Пресс», потому что создается иллюзия легкой вдавленности  блока с содержимым  по отношению к основному, темному фону  страницы. Похожую технику описывал в   Эффект Высокой печати с CSS для текста, но в данном примере мы работаем с установкой цвета границ и тени, манипулируя параметром box-shadow в стиле. Тень для текста, это уже кому как надо.

CSS

#press {
 background: #222;
 color: #555; text-shadow: 0px 2px 3px #171717;
 box-shadow: 0px 2px 3px #555;
 -webkit-box-shadow: 0px 2px 3px #555;
 -moz-box-shadow: 0px 2px 3px #555;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
}

Добавляем немного округлости углам в пункте border-radius и замечательный блок готов.
 

 

Легкая Тень


 
Отображение легкой тени, доcтигается установкой границ с оттенками серого цвета, то есть подбором основного цвета и непосредственно оттенков нижней границы блока в параметрах border-bottom. Этот метод уже хорош тем, что поддерживается практически всеми современными браузерами, да и в целом не напрягает глаз пользователя.

CSS

#shadow { 
 border: 1px solid #D6D3D3;
 border-bottom: 2px solid #C4C2C2;
 -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
}

 

 

Прессованный


 
Так же как и «легкий пресс», эта техника оформления блоков довольно проста и для страниц сайта с темным фоном подойдет наилучшим образом. В данном примере я не использовал тени для границ, эффект вдавленности достигается подбором оттенков границ по отношению к основному фону и фону самого блока. Так же как и в предыдущих примерах добавил закругленность углам контейнера.

CSS

#pressed {
 color: #E6E0E0;
 background: #111;
 border: 1px solid #000;
 border-right: 1px solid #353535;
 border-bottom: 1px solid #353535;
 -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
}

 

 

Объемный


 
За основу этого метода стилизации границ, не особо заморачиваясь, взял стиль вывода цитат плагином «WP-Note», работу которого можно встретить почти в каждой статье моего блога.
Немного поэкспериментировал с параметрами стиля, закругленные углы приняли стальной отблеск, мягкая тень границ и замечательный блок для любого контента готов.

CSS

#note {
       background-color: #EEF;
       color: #4D4B4B;
          border: 1px solid #999999; 
       border-radius: 10px 10px;
       -moz-border-radius: 10px 10px;
       -webkit-border-radius: 10px 10px;
       box-shadow: 2px 2px 3px #999;
      -webkit-box-shadow: 2px 2px 3px #999;
      -moz-box-shadow: 2px 2px 3px #999;
}

 

 

Вдавленные Линии


 
Идея конечно не нова, часто используется такая техника при создании списков и вертикальных меню. Хороший пример — блог уже знакомого нам Soh Tanaka. Достигается простым сочетанием верхней и нижней границ с различными оттенками цвета фона. Надо всегда иметь в виду, что first-child и last-child CSS селекторы не поддерживаются старыми браузерами. И это в настоящее время является занозой в заднице, для всех мастеров пытающихся идти в ногу со временем. Чтобы обойти этот косяк, вы можете использовать некоторые плагины JQuery, для поддержки старых браузеров. Хотя я считаю, что пора уже прекращать подстраиваться под тупорылые браузеры, пусть лучше они «ложатся под нас» ( мечтать не вредно ).

CSS

#indented ul{
 margin: 20px 0; padding: 0; 
        list-style: none;
}
#indented ul li {
 border-top: 1px solid #333; 
 border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
 padding: 10px;        
        display: block;
        color: #fff;
 text-decoration: none;
}
#indented ul li a:hover {background: #111;}

 

 

Скошенные Границы


 
Техника оформления границ изображений, то есть создание рамки для картинки, отлично подойдет и для стилизации любого блока с контентом. Метод очень похож на способ создания двойных границ, который обычно и применяют для оформления изображений. Немного поколдовав со стилем, мы получим замечательный эффект тонких скошенных границ, используя универсальное свойство outline, одновременно устанавливающее цвет, стиль и толщину внешней границы.

CSS

#beveled img {margin: 20px 20px 20px 0;}
img.light {
        outline: 1px solid #ddd;
 border-top: 1px solid #fff;
 padding: 10px;
        background: #f0f0f0;
}
img.dark {
        outline: 1px solid #111;
 border-top: 1px solid #555;
 padding: 10px;
        background: #333;
}

 

 

Смотреть Все Демо

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

Иногда мне кажется
Что жизнь на земле
Это просто первый круг ада…

7 Paca

Программа для быстрого и удобного наложения различных эффектов на изображения, а также конвертации из одного формата в другой (с установлением качества сжатия) Image Effect позволяет накладывать эффекты в реальном времени без вызова каких-либо дополнительных окон.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Свойство видимости CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Сделать элементы

видимыми и скрытыми:

h3.a {
  видимость: видимая;
}

h3.b {
  видимость: скрыто;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство видимости указывает, является ли элемент видимым.

Совет: Скрытые элементы занимают место на странице. Использовать свойство display для скрытия и удаления элемент из макета документа!

Показать демо ❯

Значение по умолчанию: видимый
По наследству: да
Анимация: да. Читать про анимированный
Версия: CSS2
Синтаксис JavaScript: объект .style.visibility=»скрытый» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
видимость 1,0 4,0 1,0 1,0 4,0

Синтаксис CSS

видимость: видимый|скрытый|свернуть|начальный|наследовать;

Значения свойств

), групп строк (), столбцов (), группы столбцов (). Это значение удаляет строку или столбец, но это не влияет на структуру таблицы. Пространство, занимаемое строкой или столбцом будут доступны для другого контента.

Если для других элементов используется свертывание, он отображается как «скрытый»

Значение Описание Демо
видимый Значение по умолчанию. Элемент виден Демонстрация ❯
скрытый Элемент скрыт (но все равно занимает место) Демонстрация ❯
обрушение Только для строк таблицы (
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

В этом примере показано, как свернуть элемент таблицы:

tr. collapse {
  visibility: Collapse;
}

Попробуйте сами »

Связанные страницы

Учебник по CSS: Отображение CSS и видимость

Ссылка HTML DOM: свойство видимости

❮ Назад Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

8 Top9 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Чистый CSS красивый встроенный блок

У меня есть заголовок, который содержит три встроенных блока. Для элемента, содержащего эти блоки, установлено выравнивание текста по центру, левый блок перемещается влево, а правый черный — вправо. Это приводит к приятному эффекту, когда текст среднего блока располагается по центру экрана (почти) независимо от размера окна.

Если вы сделаете окно намного меньше, блоки будут накладываться друг на друга… что мне и нужно. Проблема в том, что из-за поплавков они не «прыгают» на место. То есть, когда блоки перемещаются из горизонтального положения в вертикальное, чтобы укладываться друг на друга, самый правый блок прилипает к правой стороне (оставляя большое белое пространство слева). И средний блок из-за text-align: center тоже не перескакивает. Таким образом, у меня остается эффект «лестницы/ступенчатости» на экранах, которые маленькие, но недостаточно маленькие, чтобы вызвать полное стекирование.

Проверьте эту скрипту js, чтобы понять, что я имею в виду: http://jsfiddle.net/fphzY/15/

HTML: 

 

    <дел>
        <дел>
            ИМГ
<дел> <дел> Список ссылок
<дел> <дел> Ссылки