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

问题描述

在下面的代码片段中，我试图让第三个 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 来做到这一点。尽管有多种技术可以针对特定场景实现这一点。

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

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

,

你总是可以很好地使用 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>