html - 在 HTML 中对齐和调整 div 的大小

Question

我正在尝试像下面这样对齐 DIV:

无需计算使其适合的确切像素数量。

这是我目前的代码，

<div style="border:solid;height:50%;width:50%;background-color:green;">

<div style="float:left;width:50%;height:50%;background-color:red;"></div>

<div style="float:left;width:25%;height:25%;background-color:blue;"></div>

</div>

输出如下:

当我调整大小或更改浏览器时，我环顾四周，找不到有效的解决方案，

任何链接或答案将不胜感激。 :)

Answer 1

看看我的解决方案。

.green{
width: 100%;
height: 100vh;
background: green;
}

.red{
width: 50%;
height: 50%;
background: red;
display: inline-block;
vertical-align: bottom;
}

.blue{
width: 25%;
height: 25%;
background: blue;
display: inline-block;
vertical-align: bottom;
}
 

<div class="green">
<div class="red">
</div><div class="blue"></div>
</div>