Как разместить 2 блока div в одну строку - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Веб-разработка » HTML + CSS — коды » Как разместить 2 блока div в одну строку (Расположение нескольких div-ов в одну строку при помощи CSS)

Как разместить 2 блока div в одну строку

Kosten

Вторник, 09 Апреля 2019 | Сообщение 1

Администраторы

Сообщений:44356

Награды: 70

« 554 »

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

Два или более разных div одинаковой высоты могут быть помещены рядом с помощью CSS. Используйте свойство CSS, чтобы установить высоту и ширину div, и используйте свойство display, чтобы разместить div в формате рядом друг с другом.

Используемые свойства отображения перечислены ниже:

display:table: Это свойство используется для элементов (div), которые ведут себя как таблица.
display:table-cell: Это свойство используется для элементов (div), которые ведут себя как td.
display:table-row: Это свойство используется для элементов (div), которые ведут себя как tr.

С помощью гибкой модели макета CSS3 вы можете очень легко создавать столбцы или div элементы одинаковой высоты, которые выровнены рядом.

HTML

Код

<div class="damisamu-dsakgcesan">
   <div class="kesagub">
    <div class="gsame-kigcesan">
     <div class="kesagub-cell kesagub1">
     Первое описание!
     </div>
     <div class="kesagub-cell kesagub2">
    Второе краткое описание.
     </div>
    </div>
   </div>
  </div>

CSS

Код

   body {
    width:70%;
   }
   .damisamu-dsakgcesan .kesagub {
    width:540px;
    margin:50px;
    display:table;
   }
   .damisamu-dsakgcesan .kesagub .gsame-kigcesan {
    display:table-row;
   }
   .damisamu-dsakgcesan .kesagub .kesagub-cell {
    display:table-cell;
    width:50%;
    padding:10px;
   }
.damisamu-dsakgcesan .kesagub .kesagub-cell.kesagub1 {
    background: #076507;
    color: #f7f4f4;
    text-align: justify;
}
.damisamu-dsakgcesan .kesagub .kesagub-cell.kesagub2 {
    background: #253865;
    text-align: justify;
    color: #fdfdfd;
}

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

Демонстрация

Прикрепления: 1394686.png (54.6 Kb)

Страна: (RU)

Kosten

Вторник, 16 Апреля 2019 | Сообщение 2

Администраторы

Сообщений:44356

Награды: 70

« 554 »

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

HTML

Код

<section id="services">
      <div class="container">
        <div class="blocks-container">
          <div class="block">
            <i class="icon fab fa-apple"></i>
            <h3>APPLE</h3>
            <p>
              Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
            </p>
          </div>
          <div class="block">
            <i class=" icon fas fa-globe"></i>
            <h3>GLOBE</h3>
            <p>
              Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
            </p>
          </div>
          <div class="block">
            <i class="icon fas fa-volleyball-ball"></i>
            <h3>VOLLEYBALL-BALL</h3>
            <p>
              Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
            </p>
          </div>
          <div class="block desktop">
            <i class="icon fab fa-amazon-pay"></i>
            <h3>AMAZON-PAY</h3>
            <p>
              Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
            </p>
          </div>
        </div>
      </div>
    </section>

CSS

Код

section#services {
  width: 100%;
  background-color: #07876A;
  padding: 50px 0;
  display: flex;
}

.container {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.blocks-container{
   text-align: center;
}

.block {
  margin: 30px 0;
  background-color: #983351;
  padding: 30px 10px;
  width: 100%;
}

.block:hover {
  background-color: #AA3939;
}

#services .icon {
  font-size: 50px;
  display: inline-block;
  background-color: #AA8439;
  padding: 20px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

#services h3 {
  font-weight: 800;
  font-size: 25px;
  padding: 20px 0;
  font-family: 'Cinzel', serif;
}

#services .icon:hover {
  background-color: #fff;
  color: #AA8439;
}

#services p {
  font-family: 'Patua One', cursive;
}
/*====================================*/
/*=====TABLET=====*/
/*====================================*/

@media screen and (min-width: 768px) {
    .container {
   max-width: 720px;
    }

    .block {
   float: left;
   width: 46%;
   margin-left: 2%;
   margin-right: 2%;
    }
}

@media screen and (min-width: 992px) {
    .container {
   max-width: 960px;
    }

    .block {
   width: 29.33%;
    }

    .desktop {
  display: none;
    }
}

Демонстрация

Прикрепления: 4768285.png (63.9 Kb)

Страна: (RU)

Kosten

Понедельник, 01 Июля 2019 | Сообщение 3

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Ниже приведен пример поведения div по умолчанию для блочного элемента Div, занимающего первую строку содержащего его элемента, за которым следует второй Div.

HTML

Код

Прикрепления: 1039409.png (5.7 Kb)

Страна: (RU)

Kosten

Понедельник, 01 Июля 2019 | Сообщение 4

Администраторы

Сообщений:44356

Награды: 70

« 554 »

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

HTML

Код

<div style="padding: 50px; background-color: #b7c8d2; width: 100px; display: inline-block;">Div первый</div>
<div style="padding: 50px; background-color: #e4e0d8; display: inline-block;">Div второй</div>

Прикрепления: 5835442.png (3.9 Kb)

Страна: (RU)

Kosten

Понедельник, 01 Июля 2019 | Сообщение 5

Администраторы

Сообщений:44356

Награды: 70

« 554 »

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

Создание трехколоночного div

HTML

Код

<div style="padding: 50px; background-color: #baccd6; display: inline-block;">Div первый</div>
<div style="padding: 50px; background-color: #d6d1c8; display: inline-block;">Div второй</div>
<div style="padding: 50px; background-color: #a0bedc; display: inline-block; margin-bottom: 2em;">Div третий</div>

Конечно, если вы хотите, чтобы div занимал 100% содержащего элемента, это становится немного сложнее. Ниже приведен один пример того, как вы можете создать три div рядом друг с другом, которые занимают 100% элемента. В приведенном ниже примере вместо того, чтобы хранить все элементы div в одной строке с помощью inline-block.

HTML

Код

[info]Хотя приведенный выше пример столбца с тремя элементами div является отзывчивым, к стилю также может быть добавлена дополнительная настройка, такая как скрытие элемента Div 3 и настройка ширины.[/info]

Прикрепления: 0640666.png (5.1 Kb) · 7425072.png (5.5 Kb)

Страна: (RU)

workpage

Вторник, 03 Декабря 2019 | Сообщение 6

Пользователи

Сообщений:1

Награды: 0

« 0 »

Отличные примеры! Но как разместить 2 или 3 div по центру экрана, не используя css?

Страна: (RU)

Kosten

Вторник, 03 Августа 2021 | Сообщение 7

Администраторы

Сообщений:44356

Награды: 70

« 554 »

Цитата workpage (

)

Но как разместить 2 или 3 div по центру экрана, не используя css?

Разве в самом коде прописать стиль, но лучше с CSS, это понятнее, и адаптивность прописать.

Пример:

HTML

Код

<div class="blosan-dukida">
    <div class="karkas">block1</div>
    <div class="karkas">block2</div>
    <div class="karkas">block3</div>
</div>

CSS

Код

.blosan-dukida {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;

    height: 400px;
    border-radius: 5px;
    border: 2px solid #999;
}
.karkas {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    border: 2px solid darkgreen;
}

See the Pen
block by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Страница 1 из 1
1