Адаптивное размещение детей - PullRequest
Новая
       3

Адаптивное размещение детей

0 голосов
/ 13 февраля 2020

Я пытаюсь создать большой прямоугольник с несколькими дочерними прямоугольниками, вставленными в него в HTML. Я думал, что это будет просто, но мой CSS явно плохой :(.

В настоящее время я могу создать внешний div и внутренний div с фиксированными позициями, и он ломается, если экран изменяет размеры et c. Я хочу сделать его отзывчивым. Скрипка: @ https://jsfiddle.net/q4smybcv/

.outer-div {
  display: inline-block;
  height: 150px;
  width: 30px;
  border: 3px solid grey;
  margin-left: 10px;
  margin-right: 10px;
}

.inner-div {
  position: fixed;
  border: 1px solid blue;
}
<html>

<head>
</head>

<body>
  <div class="outer-div">
    <div class="inner-div" id="inner-div-4" style="width: 28px; height: 28px; top: 248px; left: 469px;"></div>
    <div class="inner-div" id="inner-div-3" style="width: 28px; height: 28px; top: 220px; left: 469px;"></div>
    <div class="inner-div" id="inner-div-2" style="width: 28px; height: 28px; top: 192px; left: 469px;"></div>
    <div class="inner-div" id="inner-div-1" style="width: 28px; height: 28px; top: 164px; left: 469px;"></div>
  </div>
</body>

</html>

Любая помощь приветствуется

Ответы [ 4 ]

1 голос
/ 13 февраля 2020

Я действительно рекомендую вам прочитать это: Grid-Layout-Tutorial с примерами Вам не понадобится более 20 минут, чтобы найти то, что вам нужно

Здесь немного отрывается от моего текущего Проект: 

.upper-grid-container {
        display: grid;  // most important
        grid-template-columns: repeat(4, 1fr);  //it sooo easy to tell how many columns you want
        grid-template-rows: auto;
        grid-column-gap: 0.1rem;
        grid-row-gap: auto;

      }

Таким образом я смог создать этот очень динамичный c макет

divs in a grid

1 голос
/ 13 февраля 2020

Flexbox может управлять всем этим без позиционирования вообще.

Мы можем добавить внутренние div в порядке и затем переключить порядок, в котором они расположены, используя flex-direction. После этого это просто вопрос согласования с тем концом, который вам требуется, 

.outer-div {
  display: inline-flex;
  flex-direction: column-reverse;
  height: 150px;
  width: 30px;
  border: 3px solid grey;
  margin-left: 10px;
  margin-right: 10px;
  vertical-align:top;
}


.top {
  justify-content: flex-end;
}

.bottom {
  justify-content: flex-start;
}
.inner-div {
  border: 1px solid blue;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blue {
background:lightblue;
color:white;
}

.push {
margin-top:auto;
}
<div class="outer-div top">
  <div class="inner-div blue">1</div>
  <div class="inner-div">2</div>
  <div class="inner-div">3</div>
  <div class="inner-div">4</div>
</div>

<div class="outer-div top">
  <div class="inner-div blue push">1</div>
  <div class="inner-div">2</div>
  <div class="inner-div">3</div>
  <div class="inner-div">4</div>
</div>

<div class="outer-div bottom">
  <div class="inner-div blue">1</div>
  <div class="inner-div">2</div>
  <div class="inner-div">3</div>
  <div class="inner-div">4</div>
</div>
0 голосов
/ 13 февраля 2020

Фиксированная позиция помещает ваш контент относительно области просмотра. Однако проблема в том, что у вас есть встроенные символы. Вы сверху: и слева: свойства. Потому что вам нужен РЕАЛЬНЫЙ позиционированный элемент, на который могут ссылаться эти элементы. 

.container {
      position: relative;
    }
    .outer-div {
      display: inline-block;
      position: absolute;

      height: 150px;
      width: 30px;
      border: 3px solid grey;
      margin-left: 10px;
      margin-right: 10px;
    }

    .inner-div {
      border: 1px solid blue;
      width: 28px; 
      height: 28px
    }


<html>

<head>
</head>

<body>
    <div class="container">
      <div class="outer-div">
        <div class="inner-div" id="inner-div-4"></div>
        <div class="inner-div" id="inner-div-3"></div>
        <div class="inner-div" id="inner-div-2"></div>
        <div class="inner-div" id="inner-div-1"></div>
      </div>
    </div>
</body>
</html>
0 голосов
/ 13 февраля 2020

Вы можете сделать это, используя flex очень легко. Также вы можете использовать сетку. 

.outer-div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 150px;
  width: 80%;
  border: 3px solid grey;
  margin-left: 10px;
  margin-right: 10px;
}

.inner-div {
  min-width: 50px;
  border: 1px solid blue;
  margin: 20px;
}
<html>

<head>
</head>

<body>
  <div class="outer-div">
    <div class="inner-div" id="inner-div-4" style="width: 28px; height: 28px; top: 248px; left: 469px;"></div>
    <div class="inner-div" id="inner-div-3" style="width: 28px; height: 28px; top: 220px; left: 469px;"></div>
    <div class="inner-div" id="inner-div-2" style="width: 28px; height: 28px; top: 192px; left: 469px;"></div>
    <div class="inner-div" id="inner-div-1" style="width: 28px; height: 28px; top: 164px; left: 469px;"></div>
  </div>
</body>

</html>
...