右边对齐未知高度div而不弯曲？

Question

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

我有这样的代码：

https://jsfiddle.net/yyjde1gb/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

它使用flex。

问题是：是否可以在没有flex的情况下获得相同的结果（并且肯定没有JavaScript）？

重要提示：禁止硬编码任何高度或宽度（以像素为单位），ems，百分比......（这使得这个问题难度很大）。所有高度和宽度仅由所包含的文本隐含地形成。这是一个自适应的页脚原型。

首先想到的是使用浮点数 - 但由于＆＃34; block2＆＃34;的vertical-align: middle，它是不可能的。 div（浮点数仅为vertical-align: top） - 请参阅Vertically center align divs with unknown height中的详细信息。

EDIT1：＆＃34;测试＆＃34; div应该跨越到页面的所有宽度，因为它是一个页脚。

EDIT2：建议的解决方案应该支持最老的浏览器。

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

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

Answer 1

您可以在父元素上使用CL-USER> (make-package :foo) #<PACKAGE "FOO"> CL-USER> (make-package :bar) #<PACKAGE "BAR"> CL-USER> (intern "QUUX" :foo) FOO::QUUX NIL CL-USER> (intern "QUUX" :bar) BAR::QUUX NIL CL-USER> (string= 'foo::quux 'bar::quux) T ，在右元素上使用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%);
}

Answer 2

通过以下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;
}

第二步：

删除因制作元素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;
}

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该可以对子元素使用display:inline-block;，然后使用vertical-align:

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

似乎CSS表可以实现如下所示的技巧。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;