Html 如何将块浮动到文本的相对角？

如图所示，我想将两幅图像排列到文本页面的相对角落。车身的宽度和高度可调。（如果用户缩小窗口，文本将在垂直方向上占用更多空间，而在水平方向上占用更少空间。）

我已经看过了。我想我应该从以下内容开始：

.image1{
    float: left;
}
.image2{
    float: right;
}

浮动第一个区块很容易

---

如何设置第二个块，使其始终知道要放置的位置（使其位于容器的右下角，且其下方或右侧没有文本）？

您必须使用

位置来实现目标。

另外，由于
image2
应该与最后一个
p
对齐，因此使用
last child
属性也是调整宽度的便捷工具


你为什么不把它放在你所有段落和div的末尾呢？这不是你想要的吗？同意@user22111216…代码是动态生成的吗？@user22111216也不行。看看刚才一位同事指给我看，问我问题的人似乎认为我所问的是不可能的。这让我很惊讶。@NoobEditor你的JSFIDLE肯定没有达到我的期望。尝试在JSFIDLE中拖动分隔符（或者调整窗口大小），您将看到红色框并不总是位于最后一段的右下角。不过谢谢你的努力。我不知道“calc”。@DebajyotiDas你的jsfiddle和面条师傅的问题相似。看看调整窗口的大小会把盒子的位置弄乱吗？谢谢。@NoobEditor谢谢您再试一次，但我需要的是红色方框不要位于所有文本的下方，而是位于文本的右下角。换句话说，它的左边会有一些文字（上面还有文字）。@NoobEditor这是迄今为止最接近的尝试！但是看看红色方块现在是如何覆盖文本的（使其无法阅读），这取决于窗口大小？文本包装不正确。谢谢你的努力，让我们一起来吧
    #container {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        position:relative; /*added*/
    }
    p {
        width:100%;
        height:100%;
    }
    #container > p:last-child {
        width:calc(100% - 180px); /*added*/
    }
    .image2 {
        margin: 20px 0 0 20px;
        position:absolute; /*added*/
        bottom:0; /*added*/
        right:0; /*added*/
        background: red;
   }