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

Posted 2023-05-09

【中文标题】有没有办法强制 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?

【发布时间】：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

【参考方案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>