并排divs和它们的高度有一些问题

Question

如果左div内的内容增加，整个布局的高度也会相应增加，一切都会正常工作：jsfiddle。但是，如果右侧div中的内容高度增加，布局就不会随之增加：jsfiddle

<div class="outer">
<div class="contain">
<div class="one">
</div><div class="two">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
<div class="bottom">
</div>
</div>

CSS：

.outer {
display: block;
width: 500px;
min-height: 500px;
background-color: black;    
border: 2px solid black;
}
.contain {
display: block;
width: 500px;
min-height: 500px;
background: red;
}
.one {
display:inline-block;
width: 200px;
min-height: 100px;
background: yellow;
bottom:200px;
}
.two {
float:right;
width: 300px;
min-height: 300px;
background: purple;
}
.bottom {
display:block;
background: blue;
width: 500px;
height:200px;  
bottom: 0;    
}

​希望能提供一些指导。

Answer 1

我从您的代码中假设，如果两个框(一个和两个)没有填满空间，您希望它们底部对齐？如果是这样，你应该试试这个：

.one {
display:inline-block;
width: 200px;
min-height: 100px;
background: yellow;
vertical-align: bottom;
}
.two {
display:inline-block;
width: 300px;
min-height: 300px;
background: purple;
vertical-align: bottom;
}

您正在设置两个宽度，因此将两个宽度都设置为inline-block，它们应该并排放置，并且都占用空间。浮动块不会占用空间。

Answer 2

将font-size:0添加到class="contain"中，因为它内部有内联块div，这些div本质上占用标记中的空白并创建间隙。如果需要，请在内部元素中单独添加字体大小属性。