html - 没有flex的右对齐未知高度div？

Question

继续我的问题 Vertically center align divs with unknown height

我有这样的代码:

https://jsfiddle.net/yyjde1gb/

#test {
  background: yellow;
  display: flex;
  align-items: center;
}
#block1 {
  background-color: grey;
}
#block2 {
  background-color: green;
  margin-left: auto;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    sample
  </div>
</div>

它使用 flex 。

问题是:是否有可能在没有 flex 的情况下(当然也没有 JavaScript)获得相同的结果？

重要提示:禁止以像素、ems、百分比...对任何高度或宽度进行硬编码(这使该问题变得困难)。所有的高度和宽度仅由包含的文本隐含地形成。这是一个自适应页脚原型(prototype)。

首先想到的是使用 float ——但这是不可能的，因为“block2”div 的 vertical-align: middle( float 是 vertical-align: top 仅)- 请参阅 Vertically center align divs with unknown height 中的详细信息.

EDIT1:“测试”div 应该跨越页面的所有宽度，因为它是页脚。

EDIT2:提议的解决方案应该尽可能支持最旧的浏览器。

更新 1:最佳答案来自 @Muhammad Usman。伪元素 :after 在 @Nenad Vracar 的回答中提出的 transform 旧浏览器中受支持。谢谢大家!

更新 2:在 @Muhammad Usman 的回答中，可能需要添加 line-height 属性 - 如果它在某些父 block 中声明(从而影响我们的页脚)。我必须将 line-height: 0; 添加到零大小的字体 block ，并将 line-height: 16px; 添加到 16px 字体大小的 block 。

Answer 1

通过以下 HTML，我们可以通过 3 个步骤实现它。

<div class="parent">
  <div class="child block1">
       // block one content goes here...
  </div>
  <div class="child block2">
       // block two content goes here...
  </div>
</div>

第 1 步:

使用display: inline-block属性让子元素居中对齐。

.child {
  vertical-align: middle;
  display: inline-block;
}

步骤 # 02:

移除因元素inline-block而增加的额外空间。这是删除此空格的一种方法:

.parent {
  letter-spacing: -4px;
  font-size: 0;
}
.child {
  letter-spacing: 0;
  font-size: 14px;
}

第 3 步:

让元素接触到极端的 Angular 落。这是一种将左侧元素与浏览器左边缘对齐，右侧元素与浏览器右边缘对齐的方法(以防父元素占据整个浏览器宽度)。

.parent {
  text-align: justify;
}
.parent:after {
  display: inline-block;
  vertical-align: top;
  line-height: 0;
  width: 100%;
  content: '';
  height: 0;
}

您可以在以下代码段中看到演示:

.parent {
  background: yellow;
  text-align: justify;
  letter-spacing: -4px;
  margin-bottom: 20px;
  font-size: 0;
}
.parent:after {
  display: inline-block;
  vertical-align: top;
  line-height: 0;
  width: 100%;
  content: '';
  height: 0;
}
.child {
  vertical-align: middle;
  display: inline-block;
  letter-spacing: 0;
  font-size: 16px;
  padding: 5px;
}
.block1 {
  background-color: grey;
}
.block2 {
  background-color: green;
}

<div class="parent">
  <div class="child block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div class="child block2">
    sample
  </div>
</div>
<div class="parent">
  <div class="child block1">
    <div>test test test test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test test test test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test test test test</div>
  </div>
  <div class="child block2">
    sample text goes here...
  </div>
</div>