|
Как разместить 2 блока div в одну строку
|
|
| Kosten | Вторник, 09 Апреля 2019, 22:35 | Сообщение 1 |
| В сети можно найти разные варианты, как можно разместить два 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;
}
Также вы уже самостоятельно можете их редактировать по цветовой гамме или по оформлению, где можно добавить красивые обводы и тени, все зависит от дизайна, где будут установлены.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 16 Апреля 2019, 20:53 | Сообщение 2 |
|
| С помощью нескольких правил 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;
}
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Понедельник, 01 Июля 2019, 04:28 | Сообщение 3 |
|
| Ниже приведен пример поведения div по умолчанию для блочного элемента Div, занимающего первую строку содержащего его элемента, за которым следует второй Div.
HTML
Код <div style="padding: 50px; background-color: #b2c3ce;">Див один</div> <div style="padding: 50px; background-color: #d8d4cc;">Div два</div> | | Страна: (RU) |
| |
| Kosten | Понедельник, 01 Июля 2019, 04:32 | Сообщение 4 |
|
| Даже если вы уменьшите размер элемента 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> | | Страна: (RU) |
| |
| Kosten | Понедельник, 01 Июля 2019, 04:36 | Сообщение 5 |
|
| Ниже приведены несколько разных примеров трех столбца 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]
| | Страна: (RU) |
| |
| workpage | Вторник, 03 Декабря 2019, 12:08 | Сообщение 6 |
| Отличные примеры! Но как разместить 2 или 3 div по центру экрана, не используя css?
| | Страна: (RU) |
| |
| Kosten | Вторник, 03 Августа 2021, 13:59 | Сообщение 7 |
|
| Цитата 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) |
| |
