在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

必须给外div一个静态px高度和宽度。 内部div响应%。

即使发布了lamp5，vh也是更好的选择。 根据您的窗口大小调整大小。

<div style="border:solid;height:100vh;width:100%;background-color:green;">
  <div style="position:relative; height:50%">
    <div style="position:absolute;width:50%;float:left;height:100%;background-color:red;"></div>
    <div style="position:absolute;width:25%;float:left;height:50%;background-color:blue;bottom:0px;margin-left:50%;"></div>
  </div>
</div>

Answer 2

看看我的解决方案。

.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>

Answer 3

现在有比浮游更现代，更安全的方法。

其中一个： 你可以设置你的子框下一个规则

vertical-align: bottom;
display: inline-block;

我最喜欢的另一个是flex的变体 你只需要设置父div下一个规则

显示：flex; align-items：flex-end;

但是它会将你的孩子div与你的parrent div的底部对齐，作为一个变种，你可以设置padding-bottom到你的父div以达到你想要的结果

Answer 4

为了使你的div响应，你可以使用flexbox 首先，修改一下你的html以提高可读性

<div class="yourDiv" id="greenDiv">
     <div id="support"><!--support div -->
      <div class="yourDiv" id="redDiv"></div> 
      <div class="yourDiv" id="blueDiv"></div>
     </div> <!--end support -->
   </div><!--end greenDiv-->

在这里，我使用较大的绿色div作为其他两个div的容器，并在其中使用支持div。对于样式规则，请使用separeted CSS样式表

 .yourDiv{
   /*the common properties for all divs */
   border:solid;
   height:50%;
   width:50%;   
  }

 #greenDiv{
   background-color:green;
   display:flex;
   justify-content:flex-start;
   flex-direction:row;
   flex-wrap:nowrap;
 }

 #support{ 
  display:inline-flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:flex-start;
  aligh-items:flex-start;
  width:75%;
  height:inherit;
 }

 #redDiv{
   display:inline;
   background-color:blue;}

 #blueDiv{
   display:inline;
   background-color:blue;
   align-self:flex-end;
   width:25%;
   height:25%;
 }