如图所示jsfiddle , 我想将 2 张图片排列到一页文本的对 Angular 。 body 的宽度和高度是可调的。 (如果用户缩小窗口,文本将在垂直方向占用更多空间,在水平方向占用更少空间。)
我已经看到了How to position two images in opposite corners of one div .我想我会从这样的事情开始:
.image1{
float: left;
}
.image2{
float: right;
}
float 第一个 block 很容易。
我如何设置第二个 block ,使其始终知道它的位置(这样它位于容器的右下角,并且其下方或右侧没有文本)?
最佳答案
您必须使用 position
来实现您的目标。
此外,由于 image2
应该与最后一个 p
对齐,使用 last-child
属性也是调整宽度的便捷工具
#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;
}
关于html - 如何将 block float 到文本的对 Angular ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21251814/