CSS：如何调整使用浮动属性和自动宽度和高度的两个 div 在底部对齐
Posted
技术标签:
【中文标题】CSS：如何调整使用浮动属性和自动宽度和高度的两个 div 在底部对齐【英文标题】：CSS: How to adjust two divs align at bottom which use float property and auto width and height 【发布时间】：2017-07-25 07:58:17 【问题描述】：我正在使用 5 个 div：
Main Div（用作包装器，宽度和高度设置为auto）
子 div（包含两个 div，红色和蓝色，width:75% 和 height:auto）
红色 div (height:90% width:auto)
绿色 div (height:10% width:auto)
蓝色 div (width:25%height:auto)
如下图：
在当前的宽度和高度设置下，div 会按比例相互响应。
但问题是，如果我设置红色 div 的 height:89% bottom-margin:1%，那么它们不会产生相同的输出，包含红色和绿色的子 div，如果 veiwport 很小，它会变得比蓝色 div 更短如果视口是大屏幕。
我想以这样一种方式调整它，即无论我使用什么设备，绿色 div 始终保持相应调整，蓝色 div 位于底部。
现在不幸的是，我的code 似乎无法与fiddle 一起使用，snippet 也无法使用，但它可以在我的浏览器上使用，liveweave.com 也是如此。
这是liveweave.com上的工作示例
这是我的完整代码：
HTML：
<body>
<div class="main">
<div class="sub">
<div class="red"></div>
<div class="green"></div>
</div>
<div class="blue"></div>
</div>
</body>
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;
【问题讨论】：
【参考方案1】：您可以使用Flexbox 创建此布局。默认情况下，Flexbox 会使 flex-items 的高度相同，因此如果增加蓝色 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>【讨论】：
这正是我想要的。 thnx 哥们，顺便说一句，我不太喜欢 flex 布局，所以你能解释一下这是如何工作的flex: 0 0 10% ，我知道 10% 代表绿色 div 的高度，但是 0 0 的功能是什么？弹性订单是如何运作的？
如果父级上的flex-direction设置为column，那么flex属性将定义flex-item的高度，flex: 0 0 10%是flex-grow: 0、flex-shrink: 0和flex-basis: 10%的简写，所以基本上它会将元素的固定高度设置为 10%以上是关于CSS：如何调整使用浮动属性和自动宽度和高度的两个 div 在底部对齐的主要内容，如果未能解决你的问题，请参考以下文章
两个宽度确定，高度根据内容自动伸缩的div，如何让高度相等。因为要做背景，边框等，两边齐了好看点。