• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как разместить 2 блока div в одну строку (Расположение нескольких div-ов в одну строку при помощи CSS)
Как разместить 2 блока div в одну строку
Kosten
Дата: Вторник, 2019-04-09, 22:35 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


В сети можно найти разные варианты, как можно разместить два 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
Дата: Вторник, 2019-04-16, 20:53 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


С помощью нескольких правил 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><!--block-->
          <div class="block">
            <i class=" icon fas fa-globe"></i>
            <h3>GLOBE</h3>
            <p>
              Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
            </p>
          </div><!--block-->
          <div class="block">
            <i class="icon fas fa-volleyball-ball"></i>
            <h3>VOLLEYBALL-BALL</h3>
            <p>
              Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
            </p>
          </div><!--block-->
          <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
Дата: Понедельник, 2019-07-01, 04:28 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


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



HTML

Код
<div style="padding: 50px; background-color: #b2c3ce;">Див один</div>
<div style="padding: 50px; background-color: #d8d4cc;">Div два</div>
Прикрепления: 1039409.png(5.7 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-07-01, 04:32 | Сообщение 4
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Даже если вы уменьшите размер элемента 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
Дата: Понедельник, 2019-07-01, 04:36 | Сообщение 5
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Ниже приведены несколько разных примеров трех столбца 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

Код
<div style="background-color:#b9d2ce;float: left;width: 200px;padding: 50px">1e</div>
<div style="background-color:#95b6d8;float: right;padding: 50px">2</div>
<div style="background-color:#d2cec8;float: none;overflow: hidden;padding: 50px">3</div>


[info]Хотя приведенный выше пример столбца с тремя элементами div является отзывчивым, к стилю также может быть добавлена дополнительная настройка, такая как скрытие элемента Div 3 и настройка ширины.[/info]
Прикрепления: 0640666.png(5.1 Kb) · 7425072.png(5.5 Kb)
Страна: (RU)
workpage
Дата: Вторник, 2019-12-03, 12:08 | Сообщение 6
Оффлайн
Пользователи
Сообщений:1
Награды: 0


Отличные примеры! Но как разместить 2 или 3 div по центру экрана, не используя css?
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как разместить 2 блока div в одну строку (Расположение нескольких div-ов в одну строку при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: