HTML CSS 水平对齐一个 div 的中间到另一个 div 边

Question

我正在努力实现以下结果:
水平方向，div 2 的中间与 div 1 的右侧对齐

________________________________________
|div 1 _________|_______
| |div 2 | |
| | | |
| |_________|_______|
|________________________________________|

div 的宽度将根据其他约束进行设置，但是，无论它们的大小如何，我都希望它们保持这种配置。

我想要一个纯 CSS3 解决方案(没有 javascript 调整大小...)

请注意，此问题与垂直对齐无关。

如果您有解决方案，请告诉我。

谢谢。

Answer 1

“位置”属性是一个选项。 我不确定这是否可以解决您的问题:

Example

div{
    height:400px;
    width:400px;
    background:blue;
    position:relative;
}

div div{
    width:50%;
    height:50%;
    background:skyblue;
    position:absolute;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}