CSS：如何调整两个div对齐在底部，它们使用float属性以及自动的width和height

Question

I'm working with 5 divs: 我正在与5 divs：

Main Div (works as wrapper, width and height set to auto ) Main Div（用作包装器，宽度和高度设置为auto ）
sub div (contains two divs, red and blue, width:75% and height:auto ) sub div（包含红色和蓝色两个div， width:75%和height:auto ）
- red div ( height:90% width:auto) 红色div（ height:90% width:auto)
- green div ( height:10% width:auto ) 绿色div（ height:10% width:auto ）
blue div ( width:25% height:auto ) 蓝色div（ width:25% height:auto ）

as shown below: 如下所示：

with current width and height settings divs are proportionally responsive to each other. 当前宽度和高度设置的div彼此成比例响应。

but problem is if I set height:89% bottom-margin:1% of red div, then they do not produce the same output, sub div which contains red and green, get more height if veiwport is small and it becomes shorter than blue div if viewport is large screen. 但是问题是如果我将height:89%设置为红色div的height:89% bottom-margin:1% ，那么它们将不会产生相同的输出，包含红色和绿色的sub div，如果veiwport较小并且变得比蓝色短，则会得到更高的高度如果视口是大屏幕，则为div。

I want to adjust it in such a manner that green div remains adjusted accordingly with blue div at bottom all the time, no matters what device i'm using. 我想以这种方式进行调整，无论我使用什么设备，绿色div始终始终保持相应的调整，而蓝色div始终在底部。

Now unfortunately my code doesn't seem to work with fiddle and neither does snippet work, but it works on my browser and so does on liveweave.com . 现在不幸的是，我的code似乎无法与fiddle配合使用，并且snippet也无法正常工作，但是它可以在我的浏览器上工作，在liveweave.com上也可以工作。

here is working example on liveweave.com 这是liveweave.com上的工作示例

here is my complete code: 这是我完整的代码：

HTML: HTML：

<body>
  <div class="main">
    <div class="sub">
      <div class="red"></div>
      <div class="green"></div>
    </div>
    <div class="blue"></div>
  </div>
</body>

CSS: CSS：

.main{
  width: auto;
  height: auto;
 }
.sub{
  width: 75%;
  height: auto;
  float: left;
}
.red{
  width: 100%;
  height: 85%;
  background-color: red;
}
.green{
  width: 100%;
  height: 15%;
  background-color: green;
}
.blue{
  width: 25%;
  height: 100%;
  background-color: blue;
  float: right;
}

Answer 1

You can use Flexbox to create this layout. 您可以使用Flexbox创建此布局。 Flexbox will make flex-items same height by default so if you increase height of blue div, it will increase height of sub div also. 默认情况下，Flexbox会将flex-items的高度设置为相同的高度，因此，如果您增加blue div的高度，它也会同时增加sub div的高度。

 body { margin: 0; } .main { min-height: 100vh; display: flex; } .blue { background: blue; flex: 1; } .sub { flex: 3; display: flex; flex-direction: column; } .red { flex: 1; background: red; } .green { background: green; flex: 0 0 10%; }

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

CSS：如何调整两个div对齐在底部，它们使用float属性以及自动的width和height

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-03-05 13:32:02

CSS：如何调整两个div对齐在底部，它们使用float属性以及自动的width和height

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-03-05 13:32:02

解决方案1
2 已采纳 2017-03-05 13:32:02