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

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（当然也没有 JavaScript）是否有可能获得相同的结果？

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

首先想到的是使用浮点数 - 但这是不可能的，因为“block2” div 的 vertical-align: middle （浮点数仅限 vertical-align: top） - 请参阅 Vertically center align divs with unknown height 中的详细信息。

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

EDIT2：建议的解决方案应尽可能支持最旧的浏览器。

UPDATE1：最佳答案是 @Muhammad Usman。 transform 由 @Nenad Vracar 的回答提出的旧浏览器支持伪元素 :after。谢谢大家！

UPDATE2：在 @Muhammad Usman 的回答中，可能需要添加 line-height 属性 - 如果它在某个父块中声明（从而影响我们的页脚）。我必须将line-height: 0; 添加到零大小的字体块中，并将line-height: 16px; 添加到具有16px 字体大小的块中。

Answer 1

通过关注HTML，我们可以分三步实现。

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

步骤#01：

使用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;
}

步骤#03：

使元素触及极端角落。这是一种将左元素对齐到浏览器的左边缘和右元素到右边缘的方法（如果父元素占据整个浏览器宽度）。

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

你可以在下面的sn-p中看到demo：

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

Answer 2

CSS 表格似乎可以起到如下所示的作用。

我将#block2中的文字附在div中，这可能与#block1中的标记更一致。

（注意：Panglos 在您的问题的早期版本中提供了与此相同的答案。我是否遗漏了您的要求中的某些内容？）

#test {
  background: yellow;
  display: table;
}
#block1, #block2 {
  display: table-cell;
  vertical-align: middle;
}
#block1 div {
  background-color: grey;
}
#block2 div {
  background-color: green;
}

<div id="test">
  <div id="block1">
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
  <div id="block2">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>sample text goes here</div>
  </div>
</div>

Answer 3

您应该能够在您的子元素上使用display:inline-block;，然后使用vertical-align:

#test {
  background: yellow;
}
#block1 {
  vertical-align: middle;
  background-color: grey;
  display: inline-block;
}
#block2 {
  background-color: green;
  vertical-align: middle;
  margin-left: auto;
  display: inline-block;
}

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

Answer 4

您可以在父元素上使用position: relative，在右侧元素上使用position: absolute。

#test {
  background: yellow;
  position: relative;
  width: 100%;
}
#block1 {
  background-color: grey;
  display: inline-block;
}
#block2 {
  background-color: green;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

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