有没有办法强制 div 内的浮动 div 元素仅使用 css 和 html 垂直占据可用空间？答案

【问题标题】：Is there a way of forcing floating div elements inside a div to occupy free space vertically using only css and html?有没有办法强制 div 内的浮动 div 元素仅使用 css 和 html 垂直占据可用空间？
【发布时间】：2021-10-06 00:33:00
【问题描述】：

在下面的代码 sn-p 中，我试图让第三个 div 元素（绿色元素）占据它上面的空闲空间。我正在寻找最抽象的解决方案。我的意思是，我不是在寻找具有恰好三个内部 div 和两列方案的解决方案。更重要的是，我不想使用引导程序或任何其他插件。

.outer {
  background-color: yellow;
  width: 500px;
  height: 500px;
} 

.inner-1 {
  float: left; 
  background-color: red;
  align-self: start;
}

.inner-2 {
  float:left; 
  background-color: lightblue;
  align-self:start;
}

.inner-3 {
  float:left; 
  background-color:green;
  align-self:start;
}

.p-1 {
  width:200px;
  height:200px;
}

.p-2 {
  width:200px;
  height:250px;
}

.p-3 {
  width:200px;
  height:200px;
}

.inner-1::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-2::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-3::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<div class="outer">
  <div class="inner-1">
      <div class="p-1">one</div>
  </div>
  <div class="inner-2">
      <div class="p-2">two</div>
  </div> 
  <div class="inner-3">
    <div class="p-3">three</div>
  </div> 
</div>

【问题讨论】：

这能回答你的问题吗？ CSS-only masonry layout

标签： html floating

【解决方案1】：

这通常称为砌体布局。目前，对于一般情况，使用纯 CSS 没有完美的方法来做到这一点。尽管有几种技术可以针对特定场景实现这一点。

例如，如果您不希望块顺序严格，可以使用垂直列。

.outer {
  background-color: yellow;
  width: 500px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
} 

.inner-1 {
  float: left; 
  background-color: red;
  align-self: start;
}

.inner-2 {
  float:left; 
  background-color: lightblue;
  align-self:start;
}

.inner-3 {
  float:left; 
  background-color:green;
  align-self:start;
}

.p-1 {
  width:200px;
  height:200px;
}

.p-2 {
  width:200px;
  height:250px;
}

.p-3 {
  width:200px;
  height:220px;
}

.inner-1::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-2::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-3::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<div class="outer">
  <div class="inner-1">
      <div class="p-1">one</div>
  </div>
  <div class="inner-2">
      <div class="p-2">two</div>
  </div> 
  <div class="inner-3">
    <div class="p-3">three</div>
  </div> 
</div>

在 CSS-tricks 上有一篇关于这个主题的好文章：https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

【讨论】：

【解决方案2】：

你总是可以很好地使用 Flexbox 我创建了一个例子给你看看。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 200px; /* You can change it later */
  display: flex;
  padding: 1.25rem; /* just to show background-color "yellow" */
  background-color: yellow;
}

.inner {
  width: 100%;
  height: 100%:
}

#inner__one {
  background-color: red;
}

#inner__two {
  background-color: green;
}

#inner__three {
  background-color: lightblue;
}

<div class="outer">
  <!-- You can sepeare them by giving it ID -->
  <div class="inner" id="inner__one"></div>
  <div class="inner" id="inner__two"></div>
  <div class="inner" id="inner__three"></div>
</div>

【讨论】：