不使用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、百分比等方面硬编码任何高度或宽度（这使得这个问题更加困难）。所有的高度和宽度都是由包含的文本隐含形成的。这是一个自适应底部原型。

首先想到的是使用浮动，但由于“block2” div的vertical-align:middle（浮动只有vertical-align:top），所以这是不可能的 - 详见Vertically center align divs with unknown height。

EDIT1： “test” div 应该跨越整个页面宽度，因为它是页脚。

EDIT2：提出的解决方案应尽可能支持最老的浏览器。

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

更新2：在@Muhammad Usman的答案中，如果在某个父块中声明了line-height属性（从而影响我们的页脚），则可能需要添加该属性。我不得不在零大小字体块中添加line-height: 0;，并在16px字体大小的块中添加line-height: 16px;。

- prograils

Answer 1

您可以在父元素上使用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>

- Nenad Vracar

Answer 2

你应该能够在子元素上使用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>

- jbutler483

Answer 3

使用以下 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>

步骤 #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;
}

您可以在以下代码片段中查看演示：

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

- Mohammad Usman

Answer 4

看起来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>

- Marc Audet