Как покрыть часть деления другим делом, например карточкой? - PullRequest
Новая
       23

Как покрыть часть деления другим делом, например карточкой?

0 голосов
/ 04 апреля 2020

Я хочу создать макет, где есть 3 деления на «фоне» и одно деление впереди, но оно не охватывает весь экран, это как всплывающее окно (но это всегда там). Вот чего я хочу добиться:

enter image description here

Белый div - это тот, который должен быть впереди. Зеленый div в верхней части будет иметь кнопки, поэтому фоновые div - это не просто картинки, и позже я хочу, чтобы мой веб-сайт был адаптивным.

В чем заключается идея создания таких макетов? Можете ли вы предложить некоторые методы? Как бы вы это сделали? (Я бы оценил базовые c коды, но совет всегда приветствуется.)

Ответы [ 4 ]

1 голос
/ 04 апреля 2020

Я сделал что-то подобное, надеюсь, это поможет. 

* {
  margin: 0;
  padding: 0;
  height: 100%;
}

div {
  background: white;
}

.DivRow {
  display: flex;
  flex-direction: column;
  width: 40%;
}

#row1 {
  background: #23B14D;
}

#row2 {
  background: #00A3E8;
}

#row3 {
  background: #B5E41A;
}

.DivColumn {
  margin: 20px;
  background: white;
  position: absolute;
  width: 34%;
  height: 90%;
  top: 0;
}
<div>
  <div class="DivRow">
    <div id="row1"></div>
    <div id="row2"></div>
    <div id="row3"></div>
  </div>
  <div class="DivColumn"></div>
</div>
1 голос
/ 04 апреля 2020

Самый простой способ организовать разделы с отзывчивостью без необходимости использования медиа-запросов - это использование сетки CSS. Это удивительный инструмент, и вы используете для этого гораздо меньше кода. Я рекомендую вам прочитать это: https://css-tricks.com/snippets/css/complete-guide-grid/ и ознакомиться с сеткой CSS. это решит больше, чем ваши проблемы. Ниже вы можете увидеть, как я решил вашу проблему с гораздо меньшим количеством кода, чем обычно. Надеюсь, это ответит на ваш вопрос. не забудьте поставить флажок, если вам понравилось мое решение! хорошего дня кода:) 

.container{
  width:100%;
  height:100vh;
  display:grid;
  grid-template-columns: 1fr  80% 1fr;
  grid-template-rows: 1fr 1fr 4fr 1fr 1fr;
}

.div1{
    background-color:#27ae60;
    grid-column: 1 / -1;
    grid-row:1 / 3;
}

.div2{
  background-color:#0c2461;
  grid-column:1 / -1;
  grid-row: 3 / 4;
}


.div3{
  background-color:#b8e994;
  grid-column: 1 / -1;
  grid-row: 4 / 6;
}

.div4{
  background-color:white;
  grid-column: 2 / 3;
  grid-row: 2 / 5;
}
<section class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
</section>
1 голос
/ 04 апреля 2020

После небольшого усилия я придумал это

Давайте немного углубимся в это

html довольно просто 

<div id="app">
  <div class="flex">
    <div class="row" id="item1"></div>
    <div class="row" id="item2"></div>
    <div class="row" id="item3"></div>
  </div>
  <div id="top"></div>
</div>

у нас есть контейнер верхнего уровня #app, контейнер для наших слоев div.flex и div.top, элемент, который мы будем располагать поверх.

Запускается css немного по шаблону, просто для начала 

html,body{
  margin:0;
  padding: 0;
  height: 100%;
}
.flex{
  display: flex;
  flex-direction: column;
}

#item1{
  background: teal;
}
#item2{
  background: pink;
}
#item3{
  background:orange;
}

бит html, body просто для того, чтобы демо выглядело хорошо в jsfiddle. В противном случае это будет компенсировано. Брутто.

Затем мы определяем .flex так, чтобы каждый из его элементов заполнял контейнер, т.е. изгибался по всем columns слева направо

, наконец, мы даем каждому элементу .row цвет

При этом мы получим 3 полосы цвета одинакового размера, равномерно распределенные внутри div

Интересная часть 

#app{
  position: relative;
}
#top{  
  position: absolute;
  top: 0;
  background: white;
  margin: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}

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

Теперь нам нужно, чтобы #top нарушил нормальный поток макета. Мы не хотим, чтобы его просто поместили ниже предыдущего div. Для этого мы можем сказать position: absolute, но этого недостаточно.

position: absolute ищет ближайшего предка с position: relative и выравнивается с этим предком. Поэтому, если мы хотим позиционировать #top относительно его контейнера #app

#app{
  position: relative;
}
#top{
  position: absolute;
  top: 0;
}

top:0, выровняйте #top к вершине #app. Поиграйте с ним в скрипке, чтобы получить solid гр asp.

Наконец 

#top{  
  position: absolute;
  top: 0;
  background: white;
  margin: 20px;
}

нам нужно небольшое поле по краю #top, чтобы мы могли видеть цвета позади, и мы покрыли это margin: 20px. Теперь нам нужно вычесть 2 * margin из width и height, чтобы все правильно выстроить 

#top{  
  position: absolute;
  top: 0;
  background: white;
  margin: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}

Надеюсь, это поможет!

Fin

PS Поиграйте с числами в скрипке. Это должно очень помочь 

html,body{
  margin:0;
  padding: 0;
  height: 100%;
}
div{
    width: 100%;
    height: 100%;
}
.flex{
  display: flex;
  flex-direction: column;
}

#item1{
  background: teal;
}
#item2{
  background: pink;
}
#item3{
  background:orange;
}

#app{
  position: relative;
}
#top{  
  position: absolute;
  top: 0;
  background: white;
  margin: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}
<div id="app">
  <div class="flex">
    <div class="row" id="item1"></div>
    <div class="row" id="item2"></div>
    <div class="row" id="item3"></div>
  </div>
  <div id="top"></div>
</div>
1 голос
/ 04 апреля 2020

Попробуйте что-нибудь подобное. Используйте блоки 4 div и задайте им цвет. Последний - белый, и вы даете ему absolute позицию. Добавьте margin и height ко всем div, и вы создадите свое изображение.

Пример: 

.top,
.middle,
.bottom {
  height: calc(100vh / 3); /* Fill the viewport width 3 boxes */
}

.top {
  background: #008000; /* Green background color */
}

.middle {
  background: #0000FF; /* Blue background color */
}

.bottom {
  background: #00FF00; /* Lime background color */
}

.center {
  position: absolute; /* places this div on top */
  top: 0; /* Position the div on the top */
  right: 0; /* Position the div on the right */
  bottom: 0; /* Position the div on the bottom */
  left: 0; /* Position the div on the left */
  background: #FFF; /* White background color */
  margin: 80px; /* Makes sure you can see the other dives */
  height: calc(100vh - 160px); /* Add the viewport height minus the top and bottom marin */
}
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
<div class="center"></div>

Попробуйте добавить media queries к margin или max-width, чтобы сделать его отзывчивым. Если вы хотите поместить все содержимое в «белый ящик» и прокрутить его, добавьте overflow-y: auto.

...