时间戳

首页 > 解决方案 > 最适合容器的子 div（行和列）

css - 最适合容器的子 div（行和列）

问题描述

我正在尝试找出基于父容器中的可用空间自动调整 div 大小的最佳方法，以避免出现一堆空白。我也希望，无论存在多少 div，该解决方案都应该有效（即 - 数量会随着时间而变化）。

它不必完美契合，也可以使用垂直滚动，但我试图尽可能多地避免空白。我玩弄了这个脚本，它让我很接近，但我觉得使用 css-grids 自动调整大小功能有更好的解决方案：

if (size.width > size.height && divCount.length < 13) {
  columnSize = Math.round(12 / (divCount.length / 2));
}
if (size.width < size.height && divCount.length < 13) {
  columnSize = 6;
}
let colClass = 'col-6 col-sm-4 col-md-' + columnSize;

在此处输入图像描述 入门文件，我为缺少代码而道歉 - 我真的不知道从哪里开始： https ://codepen.io/liamb/pen/KKVqvdz

标签： cssvue.jsbootstrap-4css-grid

解决方案

不确定您希望达到的准确预期结果。但是有一些想法。

  1. 您可以使用类.container-fluid而不是.container完整的宽度。
  2. 如果你想要方形col- 我做了一个例子如何使用padding-top

.container-fluid{
  background: yellow;
  width: 100vw;
  height:100vh;
}
.row{
  padding:15px;
  height: 100%;
}
.row > div {
  border: 1px solid #000;
  padding: 0;
}
.row > div::after {
  content: '';
  display: block;
  position: relative;
  z-index: 1;
  padding-top: 100%;
} 
.row > div .col-in {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col-3">
      <div class="col-in">
        Div 1
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 2
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 3
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 4
      </div>
    </div>
  </div>
</div>

这是使用grid-template-columnsand auto-filland的示例auto-fit（尝试调整它的大小以获得最佳体验）。

body {
  padding: 1em;
}

hr {
  margin: 50px;
}

.grid-container {
    display: grid;
    /*just to resize the example, optional*/
    resize: horizontal;
    overflow: hidden;
}

.grid-container-fill {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container-fit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-element {
  background-color: #000;
  padding: 20px;
  color: #fff;
  border: 1px solid #fff;
}
<h2>auto-fill</h2>
<div class="grid-container grid-container-fill">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

<hr>

<h2>auto-fit</h2>
<div class="grid-container grid-container-fit">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

尽管我已经为方形 parent 编写了一个有趣的解决方案。

如果以上所有信息都不能让您满意 - 请描述

推荐阅读