Html 尝试在水平布局中定位div

我想布局我的网站标题与图像的左侧和一些文本在左下角对齐

…或右下角

…甚至更好的是，使图像DIV高度与父DIV完全匹配：

不幸的是，我无法克服这一点：

我将从两个部分来探讨这一点。第一部分是用一个简单的

  float:left;

在两个内分区上

然后在第二个内线分区，我在摆弄位置

  position:fixed;
  right:0;

但是，如果我也添加bottom:0，则得到如下结果：

第二个DIV已跳出外部DIV的之外。如何使其相对于父DIV进行定位？我试过位置：继承/绝对/固定，但似乎没有任何效果。我必须在父DIV上设置一些内容吗

这是我的JSFIDLE：

---

有什么我不明白的吗？有带回家的留言吗？无论我怎么努力，我似乎都不理解HTML/CSS布局：（

边框被弄乱了，因为

高度：100%；

值。如果删除边框，就可以了

添加

position:relative;
top:220px;

到css类。inner2

.outer{
边框样式：实心；
边框宽度：5px；
边框颜色：红色；
宽度：100%；
高度：280px
}
.1{
边框样式：实心；
边框宽度：5px；
边框颜色：蓝色；
浮动：左
}
.2{
边框颜色：绿色；
边框样式：实心；
边框宽度：5px；
浮动：对；
位置：相对位置；
右：0；
顶部：220px；
}

一些文本

您可以使用

Flexbox

.outer{
边框：5px纯红；
显示器：flex；
证明内容：之间的空间；
调整项目：灵活启动；
}
.2{
自对准：柔性端；
边框：5px纯绿色；
}
img{
边框：5px纯蓝色；
}

一些文本

问题在于它没有响应。如果我将宽度减小，则绿色框不会干净地跳到图像框下。两者之间存在巨大差距。大多数浏览器都使用flexbox吗？