Question

如此jsfiddle 所示，我想将2张图片排列到文本页面的对角。身体的宽度和高度是可调节的。（如果用户缩小窗口，文本将占据更多空间，而不是水平。）

我已经看过How to position two images in opposite corners of one div了。我以为我会从以下内容开始：

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

浮动第一个块很容易。

我怎样才能设置第二个块，使它始终知道在哪里（这样它位于容器的右下方，文本不在其下方或右侧）？

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

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

1 个答案: