响应式 child div 展示位置

Question

我正在尝试创建一个大矩形，其中在 HTML 中插入一些 child 个矩形。我认为这很简单，但我的 CSS 明显很差:(。

目前，我能够创建具有固定位置的外部 div 和内部 div，如果屏幕调整大小等，它会中断。我想让它响应。 fiddle 是@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>

感谢任何帮助

Answer 1

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>

Answer 2

你可以很容易地使用 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>

Answer 3

固定位置将您的内容相对于视口放置。但是问题是你内联样式。您在顶部：和左侧：属性。因为您需要一个 REALTIVE 定位元素来让那些 div 可以引用。

.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>

Answer 4

我真的很推荐你阅读这篇文章：Grid-Layout-Tutorial with examples 找到你需要的东西不会超过 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;

      }

这样我就能够创建这个非常动态的布局

响应式 child div 展示位置

Responsive child div placement

html

css

responsive-design