• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как расположить несколько div блоков в ряд (Как выставить несколько div'ов в ряд с помощью CSS)
Как расположить несколько div блоков в ряд
Kosten
 		Воскресенье, 31 Марта 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Можно закрепить к частным задачам, что всегда происходит при верстке или создание сайта, это как правильно и корректно, и главное, чтоб все равномерно было, по расположению блоков div. Которые должны идти в горизонтальном положение, где также присутствует функция переноса на другую строку.

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

Все очень просто, где изначально всем div мы присвоим параметр float:left, и уже при наглядности создаем пять блоков:



HTML

Код
<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

<div id="vetug_kodam">DIV 1</div>
<div id="vetug_kodam">DIV 2</div>
<div id="vetug_kodam">DIV 3</div>
<div id="vetug_kodam">DIV 4</div>
<div id="vetug_kodam">DIV 5</div>

<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->


CSS

Код
#vetug_kodam {
    width: 125px;
    height: 48px;
    background: #283e56;
    float: left;
    margin: 0 15px 15px 0;
    text-align: center;
    padding: 10px;
    border: 2px solid #b4b4b5;
    border-radius: 3px;
    color: #FFF;
}


Здесь нужно понимать саму суть задачи, которая заключается, чтобы расположить несколько блоков в один ряд, то нужно float для них задать left для одного и right для другого.

Демонстрация
Прикрепления: 6834053.png (4.3 Kb) · css-gtas.rar (0.6 Kb)
Страна: (RU)
Kosten
 		Понедельник, 01 Апреля 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
По умолчанию тег привязки является встроенным элементом, а заголовок идет к блокам, что таким образом, не изменяя это с помощью CSS. Вы можете просто наблюдать за этим и убедиться, что вы учитываете это в CSS, но есть странная хитрость, если вы воспользуетесь подходом, при котором заполнение ссылки может вызвать такую ​​ситуацию.

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



HTML

Код
<ul>
  <li>
    <a href="" target="_blank">
      <h3>ZorNet.Ru</h3>
      <p>ZorNet - портал для вебмастера</p>
    </a>
    </li>
    <li>
    <a href="" target="_blank">
       <h3>ZorNet.Ru</h3>
      <p>ZorNet - портал для вебмастера</p>
    </a>
    </li>
    <li>
    <a href="" target="_blank">
<h3>ZorNet.Ru</h3>
      <p>ZorNet - портал для вебмастера</p>
    </a>
    </li>
    <li>
    <a href="" target="_blank">
      <h3>Heading</h3>
      <p>some text</p>
    </a>
    </li>
    <li>
    <a href="" target="_blank">
      <h3>ZorNet.Ru</h3>
      <p>ZorNet - портал для вебмастера</p>
    </a>
    </li>
    <li>
    <a href="" target="_blank">
      <h3>ZorNet.Ru</h3>
      <p>ZorNet - портал для вебмастера</p>
    </a>
    </li>
</ul>

CSS

Код
*{box-sizing: border-box;margin:0;}
ul {
  max-width: 1017px;
  margin: 48px auto;
  list-style: none;
  padding: 18px 0 0 18px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2)
}
ul:after {
  content: "";
  display: table;
  clear: both;
}
li {
  float: left;
  width: 33.3333333333%;
  padding-right: 20px;
  margin-bottom: 20px;
}
a {
    display: block;
    text-decoration: none;
    color: #ecffbe;
    background: #3c5258;
    padding: 18px;
    text-align: center;
}
h3 {
  margin-bottom: 30px;
}


Демонстрация
Прикрепления: 4957103.png (18.2 Kb)
Страна: (RU)
Kosten
 		Понедельник, 01 Апреля 2019 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Если вам нужен способ с описанием содержимого в документе HTML и XHTML. То базовые элементы часто выполняют эту работу, но наш базовый набор тегов не охватывает все возможные типы элементов страницы.

Изменение порядка следования адаптивных блоков



HTML

Код
<div class="kexestud-sanipog">
  <div class="kasetunas">1</div>
  <div class="kasetunas">2</div>
  <div class="kasetunas">3</div>
</div>


CSS

Код
.kexestud-sanipog {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.kasetunas {
    width: 40%;
    display: inline-block;
    background: #2e6cd6;
    padding: 20px;
    margin: 2%;
    font-size: 40px;
    font-weight: bold;
    color: #fdfcfc;
}


Демонстрация
Прикрепления: 8848157.png (8.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как расположить несколько div блоков в ряд (Как выставить несколько div'ов в ряд с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: