html - 如何将 block float 到文本的对 Angular ？

Question

如图所示jsfiddle , 我想将 2 张图片排列到一页文本的对 Angular 。 body 的宽度和高度是可调的。 (如果用户缩小窗口，文本将在垂直方向占用更多空间，在水平方向占用更少空间。)

我已经看到了How to position two images in opposite corners of one div .我想我会从这样的事情开始:

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

float 第一个 block 很容易。

我如何设置第二个 block ，使其始终知道它的位置(这样它位于容器的右下角，并且其下方或右侧没有文本)？

Answer 1

您必须使用 position 来实现您的目标。
此外，由于 image2 应该与最后一个 p 对齐，使用 last-child 属性也是调整宽度的便捷工具

working demo

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